Sections

Z-index

Utilities for controlling the stack order of an element.

Class Properties
.z-0 z-index: 0;
.z-10 z-index: 10;
.z-20 z-index: 20;
.z-30 z-index: 30;
.z-40 z-index: 40;
.z-50 z-index: 50;
.z-auto z-index: auto;
.z-fixed z-index: 97;
.z-sticky z-index: 98;

Usage

Use .z-{index} to control the z-order (3D positioning) of an element and its descendants.

Variants

By default, no responsive or hover-state variants are generated for z-index utilities.

Responsive

To include responsive variants like .md:z-50, add "z-index" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "z-index",
);

Hover-state

To include hover-state variants like .hover:z-50, add "z-index" to the $hover-variants variable:

$hover-variants: (
  // ...
  "z-index",
);