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.

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.