Z-Index: Dominando la Tercera Dimensión de tu Página Web
El eje de la profundidad
Imaginá que diseñaste un menú de navegación espectacular. Pero cuando el usuario hace scroll, el menú queda escondido detrás de una imagen, o un botón se vuelve imposible de clickear porque hay un elemento tapándolo.
Este es un problema muy común en el frontend, y el responsable de solucionarlo es la propiedad z-index de CSS. Para entenderla, tenemos que dejar de ver la pantalla como un lienzo plano.
El z-index controla el eje Z (profundidad), pero siempre respetando la jerarquía y los contextos que imponen los contenedores padre.
En el diseño web, usamos el eje X para mover elementos de izquierda a derecha, y el eje Y de arriba a abajo. Pero existe un tercer eje: el eje Z.
Este eje representa la profundidad (como una línea que atraviesa tu monitor hacia vos). La propiedad z-index es el número que le dice al navegador en qué posición de esa línea va cada elemento. Un z-index más alto se "acerca" al usuario, superponiéndose a los elementos del fondo.
(Nota: Para que el z-index funcione, el elemento debe estar "posicionado", es decir, tener una propiedad position distinta a static, como relative, absolute, fixed o sticky).
El mito del "9999" y los contextos de apilamiento
Cuando un elemento no se ve, el instinto rápido es ponerle z-index: 999999 para forzarlo a ir al frente. Esto es una mala práctica que vuelve el código inmanejable.
¿Por qué a veces ni un número gigante funciona? Por los Contextos de Apilamiento (Stacking Contexts).
En HTML, los elementos se agrupan. Si tenés un "Padre A" con un z-index de 1, y un "Padre B" con un z-index de 2, el Padre B siempre estará por encima. Si adentro del Padre A ponés un elemento "Hijo" con z-index: 999999, se pondrá al frente dentro de su propio grupo, pero no podrá superar al Padre B. Su profundidad está limitada por su contenedor.
/* El hijo tiene un z-index enorme, pero su padre lo limita */
.padre-a { position: relative; z-index: 1; }
.hijo { position: relative; z-index: 999999; }
.padre-b { position: relative; z-index: 2; }
En CSS, además del z-index, propiedades como opacity (menor a 1), transform, filter, o ser hijo de un contenedor flex/grid con z-index, crean automáticamente nuevos contextos de apilamiento.
Arquitectura visual limpia
Para solucionar problemas de capas no agregamos nueves al azar. Construimos el CSS con una jerarquía predecible, organizando primero los contenedores principales (fondo, contenido, menús flotantes, modales). Entender el z-index y los contextos de apilamiento es la clave para dominar el espacio tridimensional de la web.
