Foundations
Elevation and layers
Five elevation levels and the z-index ladder that keeps selects above dialogs.
Elevation
0 flat · 1 resting card · 2 raised · 3 menus and popovers · 4 sheets and dialogs · 5 critical alert. In dark mode, lighter surfaces carry elevation.
- 0
- 1
- 2
- 3
- 4
- 5
Layers
Every overlay has a layer. Selects, menus and popovers sit above dialogs and sheets, so a select opened inside a dialog is never clipped.
| Layer | z-index |
|---|---|
| base | 0 |
| raised | 1 |
| dropdown | 1000 |
| sticky | 1100 |
| header | 1200 |
| overlay | 1300 |
| sheet | 1400 |
| modal | 1500 |
| popover | 1600 |
| toast | 1700 |
| tooltip | 1800 |
| criticalAlert | 1900 |