Z-Indexes

Atomic classes for managing an element’s z-index properties.

Classes

🔗
Class CSS
.z-hide z-index: -1;
.z-base z-index: 0;
.z-selected z-index: 25;
.z-active z-index: 50;
.z-dropdown z-index: 1000;
.z-popover z-index: 2000;
.z-tooltip z-index: 3000;
.z-banner z-index: 4000;
.z-nav z-index: 5000;
.z-nav-fixed z-index: 5050;
.z-modal-bg z-index: 9000;
.z-modal z-index: 9050;

Customization

Override z-index variables:

$z-indexes: (
  hide: -1,
  base: 0,
  selected: 25,
  active: 50,
  dropdown: 1000,
  popover: 2000,
  tooltip: 3000,
  banner: 4000,
  nav: 5000,
  nav-fixed: 5050,
  modal-bg: 9000,
  modal: 9050,
);