z-index

Set the z-order of a positioned element.

Overview

Examples

Order positioned elements

Use z:* to control the stacking order of overlapping positioned elements. Values can be positive, negative, or zero.

<div class="z:9">1</div><div class="z:3">2</div><div class="z:1">3</div><div class="z:-1">4</div><div class="z:-9">5</div>

@layer utilities {  .z\:1 {    z-index: 1  }}

Use negative stacking when intentional

Negative z-index is useful for decorative layers inside an isolated component.

<div class="rel isolate">  <div class="abs inset:0 z:-1"></div></div>

Prefer local stacking contexts

Use isolate or another stacking-context boundary when z-index values should not compete with the whole page.

<article class="rel isolate">  <div class="z:10">Menu</div></article>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="z:1:hover z:0@print z:10@sm">...</div>