¿Qué es z-index y cómo se usa en el desarrollo web?

z-index — es una propiedad CSS que determina el orden de apilamiento (stacking) de los elementos en función de su posición en el eje Z. Los elementos con valores mayores de z-index se muestran por encima de los elementos con valores menores.

Se usa para gestionar la profundidad de apilamiento de elementos con posicionamiento (es decir, elementos cuyo valor de la propiedad position es diferente de static): relative, absolute, fixed, sticky.

Puntos clave de uso:

• Los elementos con posicionamiento estático (position: static;) no participan en el contexto de apilamiento y ignoran z-index.
• El valor de z-index solo se aplica a los elementos que crean un nuevo contexto de apilamiento. Este contexto se crea, por ejemplo, al usar position con valores diferentes de static, o al aplicar otras reglas CSS (como opacity < 1).
• Dentro de un mismo contexto de apilamiento, los elementos con mayor z-index se colocan por encima.
• Los contextos de apilamiento anidados se apilan como una sola unidad dentro del contexto padre.
• Sin una asignación explícita de z-index, el orden de apilamiento se determina por el orden de los elementos en el DOM.

Ejemplo de uso:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Estará por encima de .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Estará por debajo de .box1 */
}