Tokens
Z-index
Named stacking layers. Use a layer, never a raw number.
| Token | Value | Use |
|---|---|---|
| z-index/baseNormal document flow. | 0 | z-(--z-base) |
| z-index/raisedAn item lifted within its group, such as a focused segment in a toggle group. | 10 | z-(--z-raised) |
| z-index/stickySticky headers and table headers. | 100 | z-(--z-sticky) |
| z-index/dropdownMenus and select lists. | 200 | z-(--z-dropdown) |
| z-index/overlayThe scrim behind dialogs and sheets. | 300 | z-(--z-overlay) |
| z-index/modalDialogs and sheets. | 400 | z-(--z-modal) |
| z-index/popoverPopovers and tooltips, above modals so they also work inside a dialog. | 500 | z-(--z-popover) |
| z-index/toastToasts, above everything the app owns. | 600 | z-(--z-toast) |
| z-index/maxThird-party widgets only, such as Intercom. | 9999 | z-(--z-max) |