Utilidades · Apilamiento

Z-index (orden de capas)

Ordena elementos superpuestos mediante una escala pequeña y predecible, sin mezclar posicionamiento, alineación o layout.

v2.0

Tres zonas

Valores negativos, orden local y capas altas cubren la mayoría de interfaces sin números arbitrarios.

Una responsabilidad

Las clases .z-* sólo aplican z-index; la posición se compone por separado.

Contexto local

Un valor alto no escapa del contexto de apilamiento creado por su elemento padre.

Código + resultado

Compara el orden de dos elementos

La tarjeta violeta cambia de nivel frente a una tarjeta azul fija en .z-1.

Las cajas comparten el mismo contexto

Referencia .z-1

Elemento activo

Escala

Catorce niveles explícitos

La referencia azul usa .z-1; cada muestra violeta aplica la clase indicada para hacer visible su relación.

.z--3Detrás

.z--2Detrás

.z--1Detrás

.z-0Base

.z-1Local

.z-2Local

.z-3Local

.z-4Local

.z-5Local

.z-10Flotante

.z-20Flotante

.z-30Overlay

.z-40Overlay

.z-50Modal

.z-autoNatural

Regla esencial

Primero el contexto, después el número

Los valores sólo se comparan directamente cuando los elementos participan en el mismo contexto de apilamiento.

01.position-relative

Activa el contexto de posición

Úsalo en el contenedor o elemento que debe servir como referencia para hijos absolutos.

02.z-10

Ordena dentro del contexto

Un número mayor se dibuja por encima de uno menor únicamente dentro de la jerarquía comparable.

03.z-auto

Restablece el orden natural

Elimina la prioridad explícita sin cambiar la propiedad position del elemento.

HTML

<div class="position-relative z-10">
  <button class="position-absolute z-20">Acción flotante</button>
</div>

El botón se ordena dentro del panel. Un .z-50 anidado no puede superar automáticamente a otro contexto padre que ya está por encima.

Referencia

Clases disponibles

Todas las clases modifican exclusivamente la propiedad z-index.

Clases	Valores	Uso recomendado	Ejemplo
`.z-auto`	`auto`	Restablecer el orden calculado por el navegador.	`.z-auto`
`.z--{1…3}`	-1, -2, -3	Decoración o contenido detrás de la capa base.	`.z--1`
`.z-{0…5}`	0, 1, 2, 3, 4, 5	Orden local entre elementos de un componente.	`.z-4`
`.z-{10…50}`	10, 20, 30, 40, 50	Elementos flotantes, overlays y modales.	`.z-40`

Alias heredados.z-a1…3 y .z-b1…3 conservan únicamente el valor de z-index; ya no agregan position: relative. Para código nuevo usa .z-* junto con una utilidad .position-* cuando sea necesaria.

Recomendaciones

Buenas prácticas de apilamiento

Usa la escala

Evita valores arbitrarios como 9999; expresan urgencia, no una jerarquía mantenible.

Empieza local

Usa 0 a 5 dentro de componentes y reserva 10 a 50 para capas de interfaz compartidas.

Revisa el padre

Si un elemento no sube de capa, inspecciona primero el contexto creado por sus antecesores.

Compón posición

Define el posicionamiento con su módulo correspondiente y el orden con .z-*.