Z-index
Named stacking-order tokens for layered UI.
Z-index tokens give layered UI a predictable stacking order — from docked chrome up through dropdowns, overlays, modals, popovers, toasts, and tooltips — so floating surfaces never fight for the top of the stack.
base · 0
docked · 10
dropdown · 1000
sticky · 1100
banner · 1200
overlay · 1300
modal · 1400
popover · 1500
| Token | Value | Description |
|---|---|---|
| hide | -1 | Elements hidden behind other content |
| base | 0 | Default layer for normal content |
| docked | 10 | Fixed or docked elements like sidebars, headers, navigation bars |
| dropdown | 1000 | Dropdown menus and select components |
| sticky | 1100 | Sticky positioned elements that stay visible while scrolling |
| banner | 1200 | Banner notifications and alert bars |
| overlay | 1300 | Overlay backgrounds and backdrop elements |
| modal | 1400 | Modal dialogs and dialog overlays |
| popover | 1500 | Popover components and floating content panels |
| skipLink | 1600 | Skip navigation links, kept above all content for accessibility |
| toast | 1700 | Toast notifications and temporary message displays |
| tooltip | 1800 | Tooltips, kept above all other UI elements |