| 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-100 | z-index: 100; |
.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",
);