Home/Utilities/Z-Index

Z-Index

Stacking-order utilities using a deliberately spread-out numeric scale, so there's always room to slot a new layer between two existing ones.

Scale

.z-{1-9} maps to a triple-digit value rather than a plain 1–9 - leaving headroom to insert custom z-index values between framework layers without a rewrite.

Preview - stacked, offset boxes

z-1
z-3
z-2
<div class="absolute z-1">Back</div>
<div class="absolute z-3">Front</div>
Classz-index
.z-1111
.z-2222
.z-3333
.z-4444
.z-5555
.z-6666
.z-7777
.z-8888
.z-9999
Requires positioning. z-index only affects positioned elements - pair .z-{n} with .relative, .absolute, .fixed, or .sticky from the Position utilities.
Responsive variants included. .z-{n} is generated through generate-utils, so every breakpoint-prefixed copy (md:z-3, lg:z-9, …) is available too.