What is a Stacking Context?
A stacking context is a 3D conceptual space along the Z-axis. Elements within a stacking context
are painted in a specific order. A new stacking context is created when an element has certain
CSS properties (e.g. position: relative/absolute + a non-auto z-index,
opacity < 1, transform, will-change...).
Painting Order (bottom ↑ top)
- Background and borders of the root element
- Descendant block-level boxes with
z-index: negative
- Block-level boxes in normal flow
- Floating boxes
- Inline-level boxes in normal flow
- Descendant positioned elements with
z-index: 0/auto
- Descendant positioned elements with
z-index: positive
Common Pitfalls
- z-index without position — z-index has no effect on elements with
position: static
- Isolated stacking contexts — A child can never appear above its parent's
sibling if the parent forms an isolated context
- Opacity pitfall — Setting
opacity < 1 creates a new
stacking context
How to use this tool
- Paste your HTML in the HTML tab
- Paste your CSS in the CSS tab
- Click Render to see the 3D stack
- Use the inspector to adjust z-index values live
- Download the stack as PNG for your documentation