z-index
Control the paint order of overlapping elements within a stacking context.
Overview
| Class | Declarations |
|---|---|
z:<value> | z-index: <value>;
|
Examples
Order positioned elements
z:* controls paint order within a stacking context. These positioned boxes overlap; larger values paint above smaller ones. Flex and grid items can also use z-index without a non-static position.
<div class="rel isolate h:11rem"> <div class="abs left top z:30 h:6rem w:10rem">Layer 30</div> <div class="abs left-lg top-lg z:20 h:6rem w:10rem">Layer 20</div> <div class="abs left-2xl top-2xl z:10 h:6rem w:10rem">Layer 10</div></div>Generated CSS
@layer utilities { .z\:10 { z-index: 10 }}Use negative stacking when intentional
A negative z-index can place decoration behind content. isolate establishes a local stacking context, keeping this decoration above the parent’s background and behind its ordinary content.
<article class="rel isolate h:10rem p-md"> <div class="abs inset:0 z:-1" aria-hidden="true"></div> <p>Foreground content</p></article>Prefer local stacking contexts
A child’s z-index competes inside its own stacking context. The blue z:99 child cannot rise above the violet z:1 sibling because its entire parent context is at z:0.
<div class="rel h:11rem"> <article class="rel z:0 isolate h:10rem w:12rem"> <div class="abs left-md top-md z:99 h:6rem w:10rem">Child 99</div> </article> <div class="abs left-2xl top-2xl z:1 h:6rem w:10rem">Sibling 1</div></div>Apply conditionally
Use selectors and conditional queries to change the behavior when a state or viewport condition applies. Focus the blue box with Tab to bring it above the violet box. The same paint order applies from sm upward.
<div class="rel isolate h:11rem"> <div tabindex="0" class="abs left top z:0 h:6rem w:10rem z:20:focus-visible z:20@sm"> Focus with Tab </div> <div class="abs left-2xl top-2xl z:10 h:6rem w:10rem">Layer 10</div></div>