z-index Layering
Visual Demo
Stacking Context
A stacking context is formed by any element that meets specific criteria (like opacity < 1 or transform). Once formed, its children are contained within that context.
opacity: 0.9
filter: blur()
transform: scale(1)
will-change
context_demo.css
.parent {
position: relative;
z-index: 1; /* Creates a context */
}
.child {
position: absolute;
z-index: 999; /* Trapped! */
}Child (999)
Parent (z:1)Neighbor (z:2)
Common Pitfalls
Static Position
Z-index is ignored on elements with position: static (the default). Always use relative, absolute, or fixed.
Opacity & Transforms
Setting opacity < 1 or using transform creates a new stacking context, even without a z-index value.
The ‘9999’ War
Avoid arbitrarily high z-index values. Use a consistent scale (10, 20, 30) to keep your layers manageable.