Z-Index & Stacking Context
Explore how z-index controls the stacking order of positioned elements and learn about stacking contexts.
Hover over elements or adjust controls to see z-index in action!
10
20
30
40
Basic Z-Index Demo
Blue Box
z-index: 10
z-index: 10
Red Box
z-index: 20
z-index: 20
Green Box
z-index: 30
z-index: 30
Purple Box
z-index: 40
z-index: 40
Stacking Context Examples
Transform Creates Stacking Context
Parent (transform)
Child z: 999
Sibling z: 1
Opacity Creates Stacking Context
Parent (opacity: 0.9)
Child z: 999
Sibling z: 1
Positioned + Z-Index Context
Parent (position + z-index)
Child z: 999
Sibling z: 1
Negative Z-Index Demo
Background Layer
z-index: -1
(Behind background)
(Behind background)
z-index: 1
(Above background)
(Above background)
Key Concepts:
- Z-Index only works on positioned elements (position: relative, absolute, fixed, or sticky)
- Higher z-index values appear in front of lower values
- Stacking contexts are created by certain CSS properties (opacity, transform, position + z-index)
- Children cannot escape their parent's stacking context
- Negative z-index can place elements behind their parent