Z-index
Control local stacking order or place custom elements on the shared component layers.
Use a z-index utility together with position-relative, position-absolute, position-fixed or position-sticky. The numeric utilities are intended for local stacking inside a component. Semantic utilities place application-specific elements on the same shared layers as library components.
Local stacking
Use z-index-n1, z-index-0, z-index-1, z-index-2 or z-index-3 for small stacking adjustments within the same component.
<div class="position-relative z-index-1">Lower layer</div>
<div class="position-relative z-index-2">Higher layer</div>Shared component layers
The semantic utilities follow the library’s stacking scale:
| Utility | Default | Intended layer |
|---|---|---|
z-index-header |
1000 | Sticky application headers |
z-index-tooltip |
1010 | Tooltips and menus |
z-index-overlay |
1040 | Modal and drawer backdrops |
z-index-drawer |
1050 | Drawers and modal dialogs |
z-index-toast |
1060 | Toast notifications |
<header class="position-sticky top-0 z-index-header">...</header>Prefer the component’s built-in layer for library components. Use these utilities for custom elements that must deliberately participate in the same global stacking system. Each class and its matching --z-index-* custom property are generated from zIndexLevels in the Sass theme, so theme overrides keep both surfaces aligned.