Z-Index

Utilities for controlling how an element handles content that is too large for the container.

Class	Properties
.z-0	z-index: 0;
.z-1	z-index: 1;
.z-2	z-index: 2;
.z-3	z-index: 3;
.z-4	z-index: 4;
.z-5	z-index: 5;
.z-100	z-index: 100;
.z-101	z-index: 101;

Usage

Control the stack order of an element using the .z-{index} utilities.

z-40

z-30

z-20

z-10

z-0

Customization

All z-index values can be adjusted in in _settings.scss.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.