Z-index & layering
Two stacking systems. Do not mix them for the same job.
- Top layer — Dialog and Drawer via
showModal(). Above every z-index. UI that must appear over a modal lives inside that<dialog>(or the Popover API). Native::backdropis enough; skip Backdrop. --af-z-*scale — everything else. Use a token. Never invent values between bands.
| Layer | Token | Value | Used by |
|---|---|---|---|
| Content | —af-z-base | 0 | In-flow. Local -1 / 0 / 1 only |
| Dropdown | —af-z-dropdown | 1000 | Dropdown, Tooltip, navbar sheet |
| Sticky | —af-z-sticky | 1100 | Sticky navbar |
| Overlay | —af-z-overlay | 1200 | Backdrop; open navbar sheet |
| Modal | —af-z-modal | 1300 | Custom (non–top-layer) modals; focused skip |
| Toast | —af-z-toast | 1400 | Toast |
| Loader | —af-z-loader | 1500 | Page loader |
Dropdowns inside a sticky navbar stack within that bar’s context.
Rules: tokens only · prefer native dialog · keep menus/toasts over a modal inside the dialog · local -1/0/1 never join the global scale.
Related
Section titled “Related”- Tokens · Tokens full list
- Dialog · Drawer · Backdrop
- Toast · Page Loader · Navbar · Skip