Z‑Index Stacking Context Tester - Online Layering Debugger

A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z‑axis relative to the user. When an element creates a stacking context, it and its descendants are treated as a single group in the parent stacking context. This means child z‑index values only compete within that context—they can't "escape" to overlay elements in sibling stacking contexts, even with extremely high z‑index values.

The most common reason: the element or its parent is inside a stacking context that limits its reach. Check if any ancestor has opacity < 1, transform, filter, isolation: isolate, will-change, or position + z-index set. Also ensure the element itself has a position value other than static (e.g., relative, absolute, fixed, or sticky).

• position: relative | absolute | fixed | sticky + z-index ≠ auto
• opacity < 1
• transform ≠ none
• filter ≠ none
• isolation: isolate
• will-change: transform | opacity | filter
• contain: layout | paint | strict | content
• perspective ≠ none
• clip-path, mask (in some cases)

Use browser DevTools: inspect the element and look at the Computed tab. In Chrome, the "Layers" panel (under "More tools") visualizes compositing layers. You can also use this tool to experiment—add blocks, toggle stacking context properties, and observe how elements interact when they overlap. Understanding stacking contexts is key to mastering CSS layout debugging.

z-index: auto does not create a new stacking context (unless combined with certain properties). z-index: 0 does create a new stacking context when the element has a positioned value (relative, absolute, fixed, sticky). This subtle difference can cause unexpected layering behavior—z-index: 0 effectively "traps" children inside a new stacking context.