CSS z-index Property

The z-index property controls the stacking order of elements along the front-to-back axis when they overlap, determining which element is painted on top of another. It is used whenever elements visually intersect: changing the stacking order affects which element appears above or below others, but it only has any effect when the elements involved participate in the same stacking context. Because stacking is about visual layering, it does not change DOM order or the document flow; it is purely a painting-order mechanism often used together with positioning such as position.

Understanding z-index properly requires knowing about stacking contexts — a stacking context is a local coordinate system for painting and contains a set of child layers that are ordered relative to one another. New stacking contexts can be created by a variety of CSS features beyond positioning: transformations (transform), opacity changes (opacity), filters (filter), blend modes (mix-blend-mode), explicit isolation controls (isolation), and even performance hints like will-change. Once an element establishes a new stacking context, its descendants are layered within that context and cannot be drawn above content from ancestor contexts merely by changing their stacking order — the entire context itself participates as a single unit in its parent context’s stacking order.

In practical terms, the most common source of confusion with z-index is that a high stacking order on a child element cannot escape the bounds of its parent’s stacking context. That means an element that appears visually “behind” another despite a higher stacking order often lives in a different stacking context created by one of the properties above. To manage layering predictably, think in terms of contexts: either avoid unintentionally creating new contexts or purposefully create them to isolate groups of elements. Also keep in mind that visual stacking does not change keyboard or DOM order; however it does affect which element receives pointer interactions, so consider pairing layering decisions with pointer-related controls such as pointer-events when you need to manage clickability.