Z-Index & The 3D Stacking Context
The web isn't just 2D (X and Y); it has a Z-axis extending toward your eyeballs! The z-index property controls which element renders on top when elements overlap. Higher numbers sit on top of lower numbers.
"Think of a deck of playing cards or Photoshop layers. Card with z-index: 10 sits on top of Card with z-index: 1. A modal popup at z-index: 100 sits on top of everything on the page."
Deep Dive: How It Works
The Positioning Prerequisite: z-index ONLY works on elements that have a position property (relative, absolute, fixed, or sticky). Setting z-index on position: static does nothing!
Standard Stacking Scale: Dropdowns (z-index: 10-20), Sticky Navbars (z-index: 50), Modal Dialogs (z-index: 100), Toast Notifications (z-index: 1000).
Stacking Context Trap: An element with z-index: 9999 cannot escape its parent if the parent has a lower stacking context.
Syntax Blueprint
/* Modal Backdrop */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 100;
}
/* Modal Window */
.modal-content {
position: fixed;
z-index: 110; /* Sits above backdrop */
}Higher z-index numbers stack in front of lower numbers along the Z-axis.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Setting z-index on a static element and wondering why it doesn't workWhy it happens: Default position: static elements ignore the z-index property completely.
How to fix: Add position: relative; to the element.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Elevate an element with z-index
- Write a CSS rule for .modal-window with position: fixed; and z-index: 100;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.