Utility classes for setting an element's z-index level.
Set an element's z-index by using a class (.d-zi-{level}). These classes match up with the variables names listed above. The table below lists the available z-index levels, class names, and the CSS output.
Class
|
Output
|
|---|---|
| .d-zi-hide | z-index: -1; |
| .d-zi-base | z-index: 0; |
| .d-zi-base1 | z-index: 1; |
| .d-zi-selected | z-index: 25; |
| .d-zi-active | z-index: 50; |
| .d-zi-navigation | z-index: 100; |
| .d-zi-navigation-fixed | z-index: 150; |
| .d-zi-dropdown | z-index: 200; |
| .d-zi-popover | z-index: 300; |
| .d-zi-tooltip | z-index: 400; |
| .d-zi-drawer | z-index: 500; |
| .d-zi-modal | z-index: 600; |
| .d-zi-modal-element | z-index: 650; |
| .d-zi-notification | z-index: 700; |
When writing Less, you can set an element's z-index by using a variable (var(--zi-{name})). The table below lists the available variables, output, and a description for when they should be used.
Variable | Output | Description |
|---|---|---|
| var(--zi-hide) | -1 | Hides an element behind everything |
| var(--zi-base) | 0 | Resets an element to the base z-index |
| var(--zi-base1) | 1 | Raises an element 1 level up from the base z-index |
| var(--zi-selected) | 25 | Selected elements |
| var(--zi-active) | 50 | Active elements |
| var(--zi-navigation) | 100 | Navigation |
| var(--zi-navigation-fixed) | 150 | Fixed navigation |
| var(--zi-dropdown) | 200 | Dropdowns |
| var(--zi-popover) | 300 | Popovers |
| var(--zi-tooltip) | 400 | Tooltips |
| var(--zi-drawer) | 500 | Drawer |
| var(--zi-modal) | 600 | Modal |
| var(--zi-modal-element) | 650 | An element within a modal |
| var(--zi-notification) | 700 | Notifications |
Z-Index documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope