Z-Index
Controls the stacking order of overlapping elements along the z-axis (depth).
Plain English
Z-index decides which element appears on top when elements overlap. Think of it as layers in Photoshop — higher numbers sit in front, lower numbers sit behind. Modals need to appear above everything, tooltips above their trigger, and dropdown menus above the page content. Without z-index management, UI elements fight each other for the foreground and things break.
Technical
z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). It creates and interacts with stacking contexts — a z-index of 999 inside a low-stacking-context parent will still appear behind elements outside that parent. Common stacking context triggers: position + z-index, opacity < 1, transform, filter, will-change. Understanding stacking contexts is essential for debugging z-index issues.
Live Demo
Back layer
Middle layer
Front layer
Stack order
z-30Front (top)
z-20Middle
z-10Back (bottom)
Higher z-index = closer to the user.
Usage
✓ Good usage
Use a documented z-index scale (10/100/200/300/400) so every developer on the team knows that modals are always 300 and tooltips are always 100.
✗ Bad usage
Using z-index: 9999 to "fix" a stacking issue without understanding why it is happening — this is a red flag that often causes worse problems.
Recommended values
- z-index: 0 — base layer (normal flow elements)
- z-index: 10 — slightly elevated (sticky headers, raised cards on hover)
- z-index: 100 — dropdowns, tooltips
- z-index: 200 — drawers, sidebars
- z-index: 300 — modals, dialogs
- z-index: 400 — toasts, notifications
- z-index: 9999 — debug overlays only
Common mistakes
- Setting z-index without setting position — z-index has no effect on static elements.
- Using arbitrary high values (z-index: 99999) instead of a documented scale.
- Ignoring stacking contexts — a z-index fight is almost always a stacking context issue, not a value problem.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a z-index scale: sticky header at 10, dropdowns at 100, modals at 300, and toast notifications at 400. Document the scale in a comment at the top of the CSS.