Dialtone

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.

VariableOutputDescription
@zi-hide-1Hides an element behind everything
@zi-base0Resets an element to the base z-index
@zi-base11Raises an element 1 level up from the base z-index
@zi-selected25Selected elements
@zi-active50Active elements
@zi-navigation100Navigation
@zi-navigation-fixed150Fixed navigation
@zi-dropdown200Dropdowns
@zi-popover300Popovers
@zi-tooltip400Tooltips
@zi-drawer500Drawer
@zi-modal600Modal
@zi-modal-element650An element within a modal
@zi-notification700Notifications

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.

ClassOutput
.d-zi-hidez-index: -1;
.d-zi-basez-index: 0;
.d-zi-base1z-index: 1;
.d-zi-selectedz-index: 25;
.d-zi-activez-index: 50;
.d-zi-navigationz-index: 100;
.d-zi-navigation-fixedz-index: 150;
.d-zi-dropdownz-index: 200;
.d-zi-popoverz-index: 300;
.d-zi-tooltipz-index: 400;
.d-zi-drawerz-index: 500;
.d-zi-modalz-index: 600;
.d-zi-modal-elementz-index: 650;
.d-zi-notificationz-index: 700;
Last Updated: