Z-Index
Utility classes for setting an element's z-index level.
When writing Less, you can set an element's z-index by using a variable (@zi-{level}). The table below lists the available variables, output, and a description for when they should be used.
| Variable | Output | Description |
|---|---|---|
| @zi-hide | -1 | Hides an element behind everything |
| @zi-base | 0 | Resets an element to the base z-index |
| @zi-base1 | 1 | Raises an element 1 level up from the base z-index |
| @zi-selected | 25 | Selected elements |
| @zi-active | 50 | Active elements |
| @zi-navigation | 100 | Navigation |
| @zi-navigation-fixed | 150 | Fixed navigation |
| @zi-dropdown | 200 | Dropdowns |
| @zi-popover | 300 | Popovers |
| @zi-tooltip | 400 | Tooltips |
| @zi-drawer | 500 | Drawer |
| @zi-modal | 600 | Modal |
| @zi-notification | 700 | Notifications |
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-notification | z-index: 700; |