Z-index is a CSS property that controls the stacking order of positioned elements on a webpage. It determines which elements appear in front of or behind others when they overlap. Understanding z-index is essential for creating layered interfaces with dropdowns, modals, and overlays.
How Z-Index Works
Z-index only affects elements with a position value other than static (relative, absolute, fixed, or sticky). Higher z-index values appear in front of lower values. The default z-index is auto (effectively 0). Elements with equal z-index stack based on source order, later in the HTML appearing in front.
Z-Index Values
Values can be positive, negative, or zero. Common practice uses increments of 10 or 100 to leave room for additions. Modal overlays typically use high values like 1000 or 10000. Dropdown menus might use values like 100 or 1000. Negative values push elements behind others. There’s no maximum, but extremely high values can be difficult to manage.
Stacking Context
Elements create new stacking contexts, which contain their own z-index ordering. Child elements with z-index compare only within their parent’s stacking context. You can’t make a child element appear between two parent elements. Common stacking context triggers include positioned elements with z-index, opacity less than 1, transforms, and fixed/sticky position.
Common Z-Index Issues
Unintended overlap - Elements overlapping when they shouldn’t. Can’t bring to front - High z-index doesn’t work due to stacking context. Z-index wars - Constantly increasing values to override previous ones. Inconsistent stacking - No system for managing z-index values across a site.
Best Practices
Create a z-index scale for your project (eg: dropdowns: 100, modals: 1000, tooltips: 10000). Document your z-index system for team consistency. Avoid arbitrary high values, stick to your scale. Consider whether you actually need z-index, often layout fixes solve positioning better. Use CSS variables or design tokens for z-index values.
Z-Index in Modern Web Design
Fixed navigation bars often use z-index to stay above content. Dropdown menus need z-index to appear above other elements. Modal dialogs require high z-index to overlay everything. Loading indicators and toast notifications need appropriate stacking. Mobile navigation overlays use z-index for full-screen menus.
Debugging Z-Index Problems
Use browser DevTools to inspect computed z-index values. Check if elements have positioning applied. Look for parent elements creating stacking contexts. Verify the element’s stacking context hierarchy. Test with different z-index values to understand behaviour. Consider whether the issue is actually z-index or something else.
Alternatives to Z-Index
Sometimes layout solutions (flexbox, grid) eliminate the need for z-index. Changing HTML source order can achieve desired stacking without z-index. CSS order property in flexbox can reorder visual stacking. Consider if overlap is necessary or if layout adjustments work better. Not every layering problem requires z-index, it’s a tool for specific situations.