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;