Z-index and Stacking Context
Control which elements appear on top using z-index and understand stacking contexts.
What is z-index?
z-index controls the stacking order of positioned elements along the Z axis (front to back). Higher values appear on top of lower values when elements overlap.
z-index Only Works on Positioned Elements
z-index has no effect on elements with position: static (the default). You must have relative, absolute, fixed, or sticky for z-index to apply.
.popup {
position: relative; /* or absolute/fixed */
z-index: 10;
}All lessons in this course
- Static and Relative Positioning
- Absolute Positioning and Containing Block
- Fixed and Sticky Positioning
- Z-index and Stacking Context