Layout

Z-Index

Utilities for controlling the stack order of an element.

Quick reference

Class	Description
z-{index}	z-index: {index}

Available values
{index}: 0, 10, 20, 30, 40, 50 , auto

The NMP and the z-index

For the site to behave in a predictable way we need to follow a strict scheme when it comes to the z-index. The z-index should be kept in these layers:

z-30: Modals and overlays that are supposed to lay onto of all other parts.
z-20: Header
z-10: The rest

Basic usage

Setting the z-index

Control the stack order (or three-dimensional positioning) of an element in warp, regardless of order it has been displayed, using the z-{index} utilities.

01

02

03

04

05

06

07

<div>01</div>
<div>02</div>
<div>03</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">05</div>
<div class="z-10 ...">06</div>
<div class="z-0 ...">07</div>

Using negative values

To use a negative z-index value, prefix the class name with a dash to convert it to a negative value.

<div class="-z-50">
  <!-- ... -->
</div>

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:z-50 to apply the z-50 utility at only medium screen sizes and above.

<div class="z-0 md:z-50">
  <!-- ... -->
</div>