CSS Stacking Context

Stacking contexts determine element layering order. Understanding them solves most “element hiding behind another” problems.

Core Principle: z-index only works within the same stacking context. Elements in different contexts can’t directly compete for layering.

Stacking Context Triggers:

• Root element (html)
• position: absolute/relative/fixed/sticky with z-index ≠ auto
• opacity < 1
• transform ≠ none
• filter ≠ none
• isolation: isolate
• will-change with certain values

Stacking Order (back to front):

1. Root element background
2. Positioned elements with negative z-index
3. Block-level elements in normal flow
4. Floated elements
5. Inline elements
6. Positioned elements with z-index: auto or 0
7. Positioned elements with positive z-index

Mental Model: Think of nested picture frames - each frame creates its own layering system independent of other frames.

Debugging: Use browser dev tools 3D view or “Layers” panel to visualize stacking contexts.

Related: CSS Layout Debugging Strategy, CSS Positioning