z-index.mdx

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign } from "@/components/content.tsx";

export const title = "z-index"; export const description = "Utilities for controlling the stack order of an element.";

<ApiTable rows={[ ["z-", "z-index: ;"], ["z-auto", "z-index: auto;"], ["z-[]", "z-index: ;"], ["z-()", "z-index: var();"], ]} />

Examples

Basic example

Use the z-<number> utilities like z-10 and z-50 to control the stack order (or three-dimensional positioning) of an element, regardless of the order it has been displayed:

{

05

04

03

02

01

}

<!-- [!code classes:z-40,z-30,z-20,z-10,z-0] -->
<div class="z-40 ...">05</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">03</div>
<div class="z-10 ...">02</div>
<div class="z-0 ...">01</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:

{

01

02

03

04

05

}

<!-- [!code classes:-z-10] -->
<div class="...">05</div>
<div class="...">04</div>
<div class="-z-10 ...">03</div>
<div class="...">02</div>
<div class="...">01</div>

Using a custom value

Responsive design