Nexus Design SystemLayering
Six z-index tokens decide which overlay paints on top. Use one only when two positioned layers can overlap.
The z-index scale
From lowest to highest, nx:z-overlay to 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) sits above modal (50) on purpose. A dropdown, select or tooltip opened inside a Dialog has to paint above the Dialog. Keep popover above modal.
Shadow vs z-index
Shadow makes a surface look raised. z-index decides what paints on top. The two are separate, so a higher z-index doesn’t mean a bigger shadow.
Overlays render at the end of document.body, so one overlay already paints above the page. z-index matters when two overlays stack, like a select inside a dialog, or when your app has its own fixed element.