z-index

Ejemplos

Ejemplo básico

Usa las utilidades z-<number> como z-10 y z-50 para controlar el orden de apilamiento (o posicionamiento tridimensional) de un elemento, independientemente del orden en que se haya mostrado:

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

Usando valores negativos

Para usar un valor z-index negativo, antepone un guión al nombre de la clase para convertirlo en un valor negativo:

<div class="...">05</div>
<div class="...">04</div>
<div class="-z-10 ...">03</div>
<div class="...">02</div>
<div class="...">01</div>

Usando un valor personalizado

Usa la sintaxis z-[<value>] para establecer el stack order basado en un valor completamente personalizado:

<div class="z-[calc(var(--index)+1)] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis z-(<custom-property>) :

<div class="z-(--my-z) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para z-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad z-index con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.