Interface layers and z-index
The interface uses one layer scale. Content, navigation, dropdowns and dialogs have defined positions so that controls stay visible and usable across themes and screen sizes.
Choose a layer by purpose
Use the named CSS variable instead of copying a numeric value. The numbers below explain the ordering; they are not a reason to assign a larger number to a component.
| Purpose | Value | CSS variable | When to use it |
|---|---|---|---|
| Normal content | 0 / automatic | --layer-content | Page sections, cards, images and text. Usually no z-index is necessary. |
| Local details | 1–20 | — | Badges, image controls and other details inside an isolated component. These values are not page-wide layers. |
| Sticky content | 30 | --layer-sticky | Sticky calls to action, quick links and a table of contents. |
| Navigation | 40 | --layer-navigation | The header and navigation panels. |
| Floating tools | 50 | --layer-tools | Comparison/audio controls, page editing tools and scroll-to-top controls. |
| Dropdowns | 60 | --layer-dropdown | Menus, selection lists and search suggestions. Shared controls assign this layer automatically. |
| Dialogs | 100, then +20 per open dialog | --layer-dialog | Filters, enquiries, financing, account dialogs and image viewers. Opening order is assigned automatically. |
| Notifications | 1000 | --layer-notification | Transient status notifications and page-loading progress. Do not use this layer for controls or dialogs. |
For example, a custom sticky page control can use:
.page-action {
position: fixed;
z-index: var(--layer-sticky);
}Dropdowns and dialogs
Dropdowns opened inside a dialog belong to that dialog. They appear above its content and below a newer dialog. A dropdown’s value of 60 is local to its owning dialog; it is not competing against the dialog’s page-level value of 100.
Use the supplied dropdown and dialog controls. Do not assign z-index values to their panels. Opening a second dialog automatically places it above the first. Closing it returns the user to the previous interaction.
Native selection controls
Native selects use the same field styling, labels, validation and focus treatment. Their open picker is managed by the browser or operating system, so it does not need a CSS z-index. Its appearance can vary between desktop and mobile platforms.
Choose native selection for simple, single-value choices. Use the supplied custom selection controls when the interaction requires search, multiple selections or richer option content. Neither choice needs a special layering workaround.
Custom content and themes
Keep image badges and other decorative details inside an isolated component. Do not put an entire page in a high layer to fix one overlapping element. Dropdowns retain the theme of the control that opened them, including when a page contains sections with different branding.
If something appears behind another element, check its intended role and owning component first. Values such as 9999, negative offsets and arbitrary increments are not supported fixes. The standard layering rules apply at every breakpoint.