Layout
- Free forever
- No sign-up
- Instant results
Z-Index Scale Reference
A sensible named z-index scale with values for every UI layer from base to tooltip. Click any row to copy the CSS custom property declaration.
| Layer | Value | CSS var |
|---|---|---|
| Base | 0 |
--z-base: 0
|
| Raised | 10 |
--z-raised: 10
|
| Dropdown | 100 |
--z-dropdown: 100
|
| Sticky | 200 |
--z-sticky: 200
|
| Modal | 400 |
--z-modal: 400
|
| Toast | 500 |
--z-toast: 500
|
| Tooltip | 600 |
--z-tooltip: 600
|
When would you use this?
Nothing derails a UI faster than z-index wars, where developers keep adding higher and higher z-index values to get things to stack correctly, until someone ends up with z-index: 99999. A named scale fixes this. Define your layers once (base, dropdown, modal, toast, tooltip) with consistent values, reference them by name in your code, and you'll never fight a stacking context again.