z-Index
Manages the stacking order of UI elements with consistent rules. Designed so layers like Dropdown, Modal, and Tooltip never conflict.
z-Index Scale
Composed of two categories: base numeric values and semantic tokens.
Base Values (0–50)
z-0z-10z-20z-30z-40z-50Semantic Values
z-sticky100Sticky header, fixed elements
z-dropdown1000Dropdown menu, select
z-overlay1100Overlay, backdrop
z-modal2000Modal dialog
z-popover2100Popover, hover card
z-tooltip2200Tooltip
z-toast3000Toast notification (topmost)
| Token | Value | Use case |
|---|---|---|
z-sticky | 100 | Sticky header, fixed elements |
z-dropdown | 1000 | Dropdown menu, select |
z-overlay | 1100 | Overlay, backdrop |
z-modal | 2000 | Modal dialog |
z-popover | 2100 | Popover, hover card |
z-tooltip | 2200 | Tooltip |
z-toast | 3000 | Toast notification (topmost) |
Interactive Demo
Click each element to see how z-index controls the stacking order.
z-index: 0z-1000z-index: 2000Appears in front of the dropdown
z-2200Recommended Values
Recommended z-index tokens for each UI component
Header (sticky)
z-stickyDropdown Menu
z-dropdownSelect Options
z-dropdownBackdrop/Overlay
z-overlayModal/Dialog
z-modalPopover
z-popoverTooltip
z-tooltipToast/Notification
z-toastLayer Hierarchy
Higher z-index values appear in front.
z-0-50z-100z-1000z-1100z-2000z-2100z-2200z-3000Common Issues
Common z-index issues and how to resolve them
Modal is hidden behind a dropdown
→ The dropdown is creating a new stacking context
✓ Use a Portal to render the modal directly under body
Element doesn't come to front even with z-index: 9999
→ The element is constrained by the parent's stacking context
✓ Check the parent's z-index, or use isolation: isolate
position: fixed element is behind the modal
→ Fixed elements still need an appropriate z-index
✓ Use a z-index higher than z-modal (e.g. z-toast)
Stacking Context
What is a Stacking Context?
z-index comparisons only apply within the same stacking context. A new stacking context is created when:
- •An element has position: absolute/relative/fixed and a z-index set
- •An element has opacity less than 1
- •An element has transform, filter, or perspective applied
- •An element has isolation: isolate set
Best Practices
Do
- ✓Use semantic tokens (e.g. z-modal) instead of arbitrary values
- ✓Use a Portal to render modals directly under body
- ✓Use isolation: isolate to explicitly control stacking contexts
- ✓Plan your z-index layer hierarchy up front
Don't
- ✗Arbitrary large values like z-index: 9999
- ✗Bumping z-index every time something breaks
- ✗Implementing without considering stacking context
- ✗Abusing hardcoded z-index values