z-index is a CSS property that helps control the z-axis height of an element, but it often doesn't seem to work. Why is that? How does it REALLY work?

Playful Programming

CSS z-index often behaves unexpectedly due to browser painting order and stacking contexts. The post explains how browsers determine which elements render on top, covering painting order rules, how positioned vs. non-positioned elements differ, and how stacking contexts are created (e.g., via z-index on positioned elements, opacity < 1, flex/grid children). A key insight: a child element's z-index only applies within its parent stacking context, so a modal with z-index: 99 inside a header with z-index: 1 can never appear above a footer with z-index: 2. The post also covers nested stacking contexts and how frameworks like React, Angular, and Vue use portals to work around these constraints.

Why Z-Index Isn’t Working: CSS Stacking Contexts