Z-Index

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 (@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

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-notification z-index: 700;