Diseño
Utilidades para controlar el orden de apilamiento de un elemento.
| Clase | Estilos |
|---|---|
z-<number> | z-index: <number>; |
z-auto | z-index: auto; |
z-[<value>] | z-index: <value>; |
z-(<custom-property>) | z-index: var(<custom-property>); |
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 muestre:
<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>Para usar un valor de 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>Usa la sintaxis z-[<value>] para establecer el/la orden de apilamiento basándose 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 añade la función var() por ti automáticamente.
Antepone a la utilidad z-index el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="z-0 md:z-50 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.