¿Para qué sirve la propiedad z-index en CSS?

La propiedad z-index en CSS controla el orden de apilamiento de los elementos posicionados a lo largo del eje Z. Los elementos con un valor mayor de z-index se colocan por encima de los elementos con un valor menor.

Puntos clave:

• Solo se aplica a elementos posicionados (position: relative, position: absolute, position: fixed, position: sticky).
• El valor puede ser un número (positivo, negativo o cero).
• El valor automático (auto) corresponde al orden en el árbol DOM.
• Los valores negativos de z-index pueden colocar un elemento debajo del elemento padre y su contenido.
• z-index crea un contexto de apilamiento (stacking context). Los elementos dentro de un mismo contexto se ordenan por su z-index, pero todo el contexto se comporta como una unidad respecto a otros contextos.

Orden de apilamiento por defecto (sin z-index):

1. Fondo y bordes del elemento raíz.
2. Elementos posicionados con z-index negativo.
3. Elementos de bloque en flujo normal.
4. Elementos flotantes (float).
5. Elementos en línea en flujo normal.
6. Elementos posicionados con z-index: auto o z-index: 0.
7. Elementos posicionados con z-index positivo.

Ejemplo:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Estará por encima del azul */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Estará por debajo del rojo */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

En este caso, el bloque rojo (z-index: 1) estará por encima del bloque azul (z-index: 0).