Z-Index

Z-index utilities control the stacking order of positioned elements. Higher values appear in front of lower values. Elements must have a position value other than static for z-index to take effect — use the Position utilities to set positioning.

Z-index scale

.nys-z-bottom -100
.nys-z-0 0
.nys-z-100 100
.nys-z-200 200
.nys-z-300 300
.nys-z-400 400
.nys-z-500 500
.nys-z-top 99999
Copy Code
<div class="nys-z-bottom nys-position-relative">Behind everything (-100)</div>
<div class="nys-z-0 nys-position-relative">Base layer (0)</div>
<div class="nys-z-100 nys-position-relative">Layer 100</div>
<div class="nys-z-200 nys-position-relative">Layer 200</div>
<div class="nys-z-300 nys-position-relative">Layer 300</div>
<div class="nys-z-400 nys-position-relative">Layer 400</div>
<div class="nys-z-500 nys-position-relative">Layer 500</div>
<div class="nys-z-top nys-position-relative">On top of everything (99999)</div>

All z-index classes

Class CSS value
.nys-z-auto z-index: auto
.nys-z-bottom z-index: -100
.nys-z-0 z-index: 0
.nys-z-100 z-index: 100
.nys-z-200 z-index: 200
.nys-z-300 z-index: 300
.nys-z-400 z-index: 400
.nys-z-500 z-index: 500
.nys-z-top z-index: 99999

Responsive variants

All z-index utilities support responsive prefixes. See Responsive Utilities for breakpoint details.

<div class="nys-z-0 nys-desktop:nys-z-500 nys-position-relative">
  Base layer on mobile, elevated on desktop
</div>

Edit this page on GitHub (Permissions required)

Last updated: June 17, 2026