Z-Index

Utility classes for setting an element's z-index level.

Classes

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;

Variables

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

Classes #

Variables #

Classes

Variables