¿Qué es el z-index en CSS y cómo gestiona la superposición de elementos?

Descubre cómo z-index en CSS controla el orden de apilamiento (superposición) de elementos posicionados y la importancia de los contextos de apilamiento.

La propiedad z-index en CSS se utiliza para controlar el orden de apilamiento en el eje Z (profundidad) de los elementos que han sido posicionados. Un elemento con un valor de z-index más alto se mostrará encima (más cerca del espectador) de un elemento con un valor de z-index más bajo, siempre y cuando ambos pertenezcan al mismo contexto de apilamiento o sus contextos de apilamiento así lo permitan.

Cómo funciona y gestiona la superposición:

Solo para elementos posicionados: La propiedad z-index solo tiene efecto en elementos que tienen una propiedad position con un valor distinto de static (el valor por defecto). Es decir, funciona en elementos con position: relative;, position: absolute;, position: fixed; o position: sticky;. En elementos no posicionados (static), z-index es ignorado.
Valores numéricos: z-index acepta valores enteros (positivos, negativos o cero). Un número mayor indica una posición más "alta" en la pila. El valor por defecto es auto, que significa que el elemento se apila según su orden en el HTML dentro de su contexto de apilamiento actual.
Contextos de apilamiento (Stacking Contexts): Este es el concepto más crucial para entender z-index.
- Un contexto de apilamiento es un grupo de elementos que se mueven juntos en el eje Z. El elemento raíz (<html>) crea el contexto de apilamiento principal.
- Se crea un nuevo contexto de apilamiento cuando un elemento cumple ciertas condiciones, principalmente:
  - Es el elemento raíz.
  - Tiene position (distinto de static) y un z-index distinto de auto.
  - Tiene una opacity menor que 1.
  - Tiene aplicada una propiedad transform, filter, perspective, clip-path, o mask (con valores distintos a los iniciales).
  - Es un contenedor Flexbox o Grid y alguno de sus hijos tiene un z-index no auto.
  - Tiene position: fixed; o position: sticky;.
- Importancia: Los valores de z-index de los elementos hijos de un contexto de apilamiento solo se comparan y ordenan entre sí dentro de ese mismo contexto. Un elemento hijo no puede «elevarse» por encima de otro elemento si el contexto de apilamiento de su propio padre está por debajo del contexto de ese otro elemento, incluso si el hijo tiene un z-index numéricamente muy alto. El z-index del elemento que crea el contexto de apilamiento determina el orden de todo ese contexto con respecto a otros contextos.

Ejemplo:

.contenedor {
  position: relative; /* Crea un contexto de apilamiento si tuviera z-index no auto */
}

.caja1 {
  position: absolute;
  top: 20px; left: 20px;
  width: 100px; height: 100px;
  background-color: lightcoral;
  z-index: 1; /* Si .caja2 tiene z-index > 1, .caja1 estará detrás */
}

.caja2 {
  position: absolute;
  top: 40px; left: 40px;
  width: 100px; height: 100px;
  background-color: lightblue;
  z-index: 2; /* Estará encima de .caja1 porque su z-index es mayor */
}Lenguaje del código: PHP (php)

En resumen, z-index te permite controlar explícitamente qué elemento se muestra encima de otro cuando se superponen visualmente, pero siempre debes tener en cuenta la jerarquía de los contextos de apilamiento para predecir correctamente el resultado.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante