Z-Index
Use these utility classes for setting an element's z-index level.
Variables
When writing Less, you can set an element's z-index by using a variable (@z-index--{level}). The table below lists the available variables, output, and a description for when they should be used.
Variable | Output | Description |
---|---|---|
@z-index--hide | -1 | Hides an element behind everything |
@z-index--base | 0 | Resets an object to the base z-index |
@z-index--base1 | 1 | Raises an object 1 level up from the base z-index |
@z-index--selected | 25 | Selected objects |
@z-index--active | 50 | Active objects |
@z-index--nav | 100 | Navigation |
@z-index--nav-fixed | 150 | Fixed navigation |
@z-index--dropdown | 200 | Dropdowns |
@z-index--popover | 300 | Popovers |
@z-index--tooltip | 400 | Tooltips |
@z-index--toast | 500 | Toast |
@z-index--drawer | 600 | Content drawers / rails |
@z-index--modal-bg | 700 | Modal background |
@z-index--modal | 701 | Modal |
Classes
Set an element's z-index by using a class (.d-z-index--{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-z-index--hide | z-index: -1; |
.d-z-index--base | z-index: 0; |
.d-z-index--base1 | z-index: 1; |
.d-z-index--selected | z-index: 25; |
.d-z-index--active | z-index: 50; |
.d-z-index--nav | z-index: 100; |
.d-z-index--nav-fixed | z-index: 150; |
.d-z-index--dropdown | z-index: 200; |
.d-z-index--popover | z-index: 300; |
.d-z-index--tooltip | z-index: 400; |
.d-z-index--toast | z-index: 500; |
.d-z-index--drawer | z-index: 600; |
.d-z-index--modal-bg | z-index: 700; |
.d-z-index--modal | z-index: 701; |