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;