Layering
A layering scale with a step of fifty. The step is the point: between two neighbouring layers there is room for someone else’s widget, a consent banner or a chat bubble that has to sit between them — and no need to renumber anything.
On this page
- The scale lives on the document root, not on a subtree: overlay panels teleport into
bodyand never see a subtree’s variables. One scale per document is a property, not a limitation.
Layering: z-index scale
| Token | Value |
|---|---|
--gr-z-bottom-nav--gr-z-bottom-nav | 850 |
--gr-z-navbar--gr-z-navbar | 900 |
--gr-z-dropdown--gr-z-dropdown | 1000 |
--gr-z-tooltip--gr-z-tooltip | 1050 |
--gr-z-modal--gr-z-modal | 1100 |
--gr-z-loading--gr-z-loading | 1150 |
--gr-z-toast--gr-z-toast | 1200 |