Layering
A 6-token z-index scale for stacking overlays. Shadow communicates perceived elevation; z-index controls actual paint order. They are independent axes — a higher z-index does not imply a larger shadow, and the elevation shadows never set stacking. Reach for a z-index token only when two positioned layers can overlap.
The z-index scale
Six tokens, low to high. Utilities run nx:z-overlay through nx:z-max.
| Token | Value | Use |
|---|---|---|
| nx:z-overlay | 10 | Low-level scrims |
| nx:z-sticky | 30 | App-shell chrome, sticky headers |
| nx:z-modal | 50 | Dialog and its backdrop |
| nx:z-popover | 70 | Dropdown / select / tooltip — the floating layer |
| nx:z-toast | 100 | Notifications |
| nx:z-max | 9999 | Host system UI |
Why popover sits above modal
Popover (70) outranks modal (50) by design. A dropdown, select, or tooltip opened inside a Dialog must paint above the dialog to stay usable — so the floating-layer token deliberately sits above the modal layer. This is the non-obvious ordering; do not “fix” it by dropping popover below modal.
Shadow vs z-index
Shadow is perceived elevation; z-index is paint order. They are independent — reach for a z-index token only when two positioned layers can actually overlap. Radix portals append their content to document.body, so a single overlay paints above page content in DOM order on its own; z-index becomes load-bearing when two overlay types stack (a select opened inside a dialog) or a consumer ships a competing fixed element.