Z-index
Z-indexes are used to stack components in a logical manner.
| Token | Value |
|---|---|
--ahi-z-index-sticky |
300 |
--ahi-z-index-nav |
400 |
--ahi-z-index-top-bar |
500 |
--ahi-z-index-overlay |
600 |
--ahi-z-index-dialog |
800 |
--ahi-z-index-dropdown |
900 |
--ahi-z-index-alert |
950 |
--ahi-z-index-tooltip |
1000 |
Overlays built on <ahi-popup> — <ahi-dropdown>,
<ahi-select>, <ahi-combobox>, <ahi-tooltip>,
submenus, and <ahi-color-picker> panels — as well as
<ahi-banner> toasts, render in the browser’s
native top layer. The top layer paints above all z-indexed content regardless of these tokens, and
elements within it stack in the order they are shown. These tokens still govern components that are not
promoted to the top layer (sticky headers, navigation, the dialog backdrop, and the fallback positioning
path for browsers without Popover API support).