CSS z-index

La propiedad z-index controla qué elementos aparecen delante o detrás en la pantalla. Es clave para manejar la superposición en interfaces complejas.

Fundamentos de z-index

Los valores de z-index definen el orden relativo de los elementos en la pila de capas. Solo funciona en elementos con position distinto de static.

Valor	Descripción
auto	El elemento hereda el orden de apilamiento de su padre.
0, 1, 10, ...	Con valores positivos, el elemento se coloca más al frente.
-1, -10, ...	Con valores negativos, el elemento queda más atrás.

Ejemplo de uso de z-index

En este ejemplo, dos cajas se superponen. z-index define cuál se muestra encima.

La caja azul tiene z-index: 1, mientras que la roja con z-index: 2 aparece por encima.

Stacking context (contexto de apilamiento)

El contexto de apilamiento define cómo se ordenan los elementos en capas. Se crea uno nuevo cuando un elemento tiene position y z-index definidos o cuando se usan ciertas propiedades CSS (por ejemplo opacity < 1).

En este ejemplo, el contenedor padre crea un stacking context, por lo que los valores de z-index de los hijos solo aplican dentro de él.

Uso práctico

Z-index se usa comúnmente en pop-ups, menús, modales o tooltips. Si un menú aparece detrás de otro elemento, z-index permite traerlo al frente.

Consejos para usar z-index

Un uso correcto de z-index evita superposiciones inesperadas y asegura una jerarquía visual clara.

Comprueba siempre que el elemento tenga una propiedad position (relative, absolute, fixed).
Evita valores excesivamente altos o aleatorios, ya que dificultan el mantenimiento.
Usa un sistema lógico de capas para mantener un layout consistente.