# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/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-<number>", "z-index: <number>;"],
    ["z-auto", "z-index: auto;"],
    ["z-[<value>]", "z-index: <value>;"],
    ["z-(<custom-property>)", "z-index: var(<custom-property>);"],
  ]}
/>

## 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:

<Figure>

<Example>
  {
    <div className="flex justify-center -space-x-3 font-mono text-sm leading-6 font-bold text-white">
      <div className="z-40 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        05
      </div>
      <div className="z-30 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        04
      </div>
      <div className="z-20 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        03
      </div>
      <div className="z-10 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        02
      </div>
      <div className="z-0 flex size-16 items-center justify-center rounded-full bg-pink-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        01
      </div>
    </div>
  }
</Example>

```html
<!-- [!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>
```

</Figure>

### Using negative values

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

<Figure>

<Example>
  {
    <div className="isolate flex justify-center -space-x-3 font-mono text-sm leading-6 font-bold text-white">
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        01
      </div>
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        02
      </div>
      <div className="-z-10 flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        03
      </div>
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        04
      </div>
      <div className="flex size-16 items-center justify-center rounded-full bg-fuchsia-500 shadow-lg outline-2 outline-white dark:outline-[#11121E]">
        05
      </div>
    </div>
  }
</Example>

```html
<!-- [!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>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="z" name="stack order" value="calc(var(--index)+1)" />

### Responsive design

<ResponsiveDesign property="z-index" defaultClass="z-0" featuredClass="z-50" />