Z-index
The named z-index scale used across the site.
Stacking order is named, not numeric-by-guess. Always reach for a token.
| Token | Value | Used for |
|---|---|---|
--z-base | 0 | Default flow. |
--z-above | 1 | Pseudo-elements above content (radio hit-areas). |
--z-raised | 2 | Hover lifts. |
--z-element | 3 | Layered UI within a component. |
--z-overlay | 100 | Tooltips, alerts, popovers. |
--z-sticky | 500 | Sticky headers / search bars. |
--z-lightbox | 999 | Full-screen media viewers. |
--z-nav | 1000 | Primary navigation chrome. |
--z-skiplink | 999999 | Skip-to-content link, above everything. |
z-index: var(--z-overlay);