juniorCSS
What is z-index and how does it work?
Updated Apr 28, 2026
Short answer
z-index controls the vertical stacking order of elements that overlap.
Deep explanation
Elements with a higher z-index overlap those with a lower one. However, z-index only works on positioned elements (position: relative, absolute, fixed, or sticky) or flex/grid items. It operates within a 'stacking context'.
Real-world example
Ensuring a dropdown menu appears on top of other content below it.
Common mistakes
- Applying z-index to static elements, or fighting z-index wars (e.g., z-index: 99999) without understanding stacking contexts.
Follow-up questions
- What is a stacking context?