Z-index es una propiedad interesante de CSS, porque no se mide en píxeles, porcentajes o cualquier otra unidad de medida, pero ¿sabes realmente qué es y para qué sirve? ¿La has intentado usar y no sale lo que planeabas hacer? ¡Entonces acompáñanos a descubrirlo!
Tabla de Contenido
¿Qué es z-index?
La propiedad z-index sirve para determinar el valor de un objeto dentro del eje z en un sistema de coordenadas. En dibujo técnico, diseño 3D y otras disciplinas a este valor se le conoce como tercer eje o profundidad.
Imaginemos que colocamos 3 hojas, una encima de la otra en un plano.
Al terminar, notaremos que la primera hoja quedo hasta el final, la segunda quedo en el medio y la tercera es la que podemos ver completamente. A esto se le conoce como pila o stack. Básicamente, una estructura de datos donde podemos siempre tener acceso inmediato al elemento superior o TOS (Top Of Stack).
¿Cómo funciona z-index en HTML?
En un documento HTML la pila funciona bajo el principio de FILO (First Input, Last Ouput) es decir, el primero de la pila, es el último en salir. El punto de partida es la esquina superior izquierda, colocando un documento HTML en el cuarto cuadrante del plano cartesiano.
Dicho cuadrante utiliza su eje X de izquierda (LEFT) a derecha (RIGHT) y su eje Y de arriba (TOP) hacia abajo (BOTTOM)
Dicho esto, con z-index podemos controlar la manera en como se posicionan los elementos encima de otros. Esto afecta principalmente a aquellos que se encuentren posicionados. Debido a esto, es importante hacer al menos un repaso a la propiedad position. Los valores de esta son los siguientes:
- static: Es el valor default, los elementos aparecen siguiendo el flujo del documento, es decir, según como vayan siendo creados.
- absolute: La posición del elemento depende completamente de su elemento padre
- fixed: La posición del elemento es relativa a la ventana del navegador.
- relative: La posición del elemento depende de su ubicación actual.
- sticky: La posición del elemento depende del scroll del usuario.
- initial: La posición del elemento regresa a su valor inicial.
- inherit: El elemento hereda el valor de position de su elemento padre.
IMPORTANTE: Una de las razones más comunes del porque a veces no funciona la propiedad z-index en nuestros proyectos, tiene que ver con el hecho de tener mal establecida la propiedad position de nuestros elementos.
Uso de la propiedad z-index en CSS
En un documento HTML cualquiera, colocamos 3 div cada uno con un id diferente y compartiendo el mismo valor de class. Por ejemplo:
<div class="caja" id="rojo"></div>
<div class="caja" id="verde"></div>
<div class="caja" id="azul"></div>
Con CSS, hagamos que nuestros objetos sean de 200×200 píxeles.
.caja{
width: 200px;
height: 200px;
}
Luego, definimos un color para cada caja, usando su identificadores.
#rojo{ background: red; }
#verde{ background: green; }
#azul{ background: blue; }
Como los objetos tiene como valor default en su propiedad position el valor static, este es el resultado.
Editemos la clase caja. Hagamos que que todas sean de posición absoluta.
.caja{
position: absolute;
width: 200px;
height: 200px;
}
Debido a LIFO, todas las caja se “apilaron” y queda encima (frente a nuestros ojos) la de color azul ya que fue la última que colocamos.
Hagamos que la caja roja comience en el punto x=0 (left) y=0 (top)
#rojo{
background: red;
top: 0;
left: 0;
}
La caja verde estará en x=20, y=20
#verde{
background: green;
top: 20px;
left: 20px;
}
Y la caja azul tendrá x=40, y=40
#azul{
background: blue;
top: 40px;
left: 40px;
}
Ahora podemos apreciar mejor su apilamiento.
Cambiemos el orden de las cajas con z-index. Enviaremos la caja azul al fondo (profundidad 1)
#azul{
background: blue;
top: 40px;
left: 40px;
z-index: 1;
}
La caja roja tendrá de profundidad 2
#rojo{
background: red;
top: 0;
left: 0;
z-index: 2;
}
Y la caja verde será la que ocupe el TOS, es decir, su profundidad será 3.
#verde{
background: green;
top: 20px;
left: 20px;
z-index: 3;
}
Observemos el resultado.
Pero no es suficiente, pongamos esto todavía más a prueba añadiendo tres párrafos antes de cada caja.
<p>Saludos cordiales! Soy un texto metiche</p>
<div class="caja" id="rojo"></div>
<p>Hola soy un segundo texto mucho más metiche</p>
<div class="caja" id="verde"></div>
<p>Hola soy un tercer texto muchísimo más metiche que mis colegas</p>
<div class="caja" id="azul"></div>
En el CSS, hagamos el texto en negritas, aumentamos un poco la fuente y convertimos a nuestros párrafos en el TOS (el elemento superior)
p{
font-weight: bold;
font-size: 1.4em;
z-index: 4;
}
Sin embargo, al observar el resultado no pasa nada.
¿Qué fue lo que paso? Como dijimos un poco antes, la propiedad z-index funciona con elementos posicionados excepto el valor static que es el default. Así que haremos que el texto tenga una posición relativa.
p{
font-weight: bold;
font-size: 1.4em;
position: relative;
z-index: 4;
}
¡Ahora si funciona!
Jugando un poco, enviaremos la caja roja que estaba en profundidad 2 a 4.
#rojo{
background: red;
top: 0;
left: 0;
z-index: 4;
}
Y los párrafos los cambiamos de 4 a 2
p{
font-weight: bold;
font-size: 1.4em;
position: relative;
z-index: 2;
}
Observemos el resultado.
Algunos problemas y errores con z-index
Es posible que a veces simplemente parezca que z-index no funciona, entonces muchos nos hacemos la pregunta ¿Por qué algunos elementos no respetan correctamente la propiedad z-index aún después de establecer su valor de position?
La propiedad z-index está pensada para elementos que actúan como un bloque como div, span, section, article entre otros. Aplicarla sobre objetos que no funcionan de esa manera puede producir a veces, resultados no deseados, incluso cuando tenemos demasiados elementos apilados puede que exista algún div (u algún otro elemento) rebelde que no se quiera acomodar. En pocas palabras, no es una respuesta fácil,
Otra posible respuesta se deba al concepto de contexto de apilamiento. Es decir, la manera en como se apilan los elementos. Inicialmente nuestro contexto de apilamiento es el documento HTML en sí y todo lo que colocamos se apila en relación a esto, pero ¿Qué pasa cuando aplicamos una transformación a los objetos? El resultado de esta puede alterar el orden de apilamiento ignorando los valores de z-index.
¿Qué pasa con los objetos que están dentro de otros? Estos no tienen como contexto de apilamiento al documento HTML, sino a su elemento padre en sí, así que podríamos estar batallando en apilar un objeto en la cima, cuando por estar dentro de otro simplemente no saldrá de ahí.
Y eso es todo por ahora ¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
