CSS Z-index
Control the stack order of elements.
1Stacking Order
Elements with higher z-index cover those with lower z-index. Only works on positioned elements.
.front {
position: relative;
z-index: 10;
}
.back {
position: relative;
z-index: 1;
}2Understand it in a real interface
Z-index operates within stacking contexts rather than acting as one global ranking for the whole page. A transform or other style can create a new context, keeping a child underneath content outside that context even when the child has a large z-index. Inspect ancestors when stacking seems surprising.
3Try it yourself
Create two overlapping panels and a popup inside one. Change their z-index values, then add a transform to the popup’s parent. Inspect which context each element belongs to. Try moving the popup’s placement or changing the parent’s stacking level instead of using an enormous number.
Finished reading?
Mark this topic as complete to track progress.