Warp Design System

Appearance

Layout

Z-Index ​

Utilities for controlling the stack order of an element.

Quick reference ​

ClassDescription
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
html
<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.

html
<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.

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