Cómo utilizar z-index y los contextos de apilamiento
La propiedad z-index en CSS se utiliza para ordenar los elementos que se superpongan entre sí. Con la propiedad z-index podemos controlar qué elemento iría encima y cual debajo, como si el documento tuviera profundidad, tres dimensiones en lugar de dos.Puede haber muchos motivos para que dos elementos se superpongan. Por ejemplo, ¿quién no se ha visto lidiando con elementos posicionados de forma absoluta y fija que se superponen con otros?
El sistema de coordenadas tridimensional de un contexto de apilamiento. Los elementos dentro de un contexto de apilamiento se colocan, o "apilan", uno frente al otro en el eje z. La posición de un elemento en el eje z, o su orden z, está determinada por la propiedad z-index .
El orden z predeterminado
Antes de ver cómo utilizar z-index, vamos a repasar como se determina el orden z de elementos superpuestos.
El valor predeterminado de z-index es auto. El navegador irá ordenando los elementos en el orden en el que aparezcan, el primero quedará abajo y los siguientes elementos se irán apilando encima. Esta regla la aplica en este orden:
- Primero posiciona el elemento raíz <html>
- Luego los elementos no posicionados (cualquiera con el valor predeterminado position: static)
- Luego los elementos posicionados (cualquiera con position: relative, position: absolute, position: fixed, position: sticky, o cualquier otro valor diferente a position: static).
Si al terminar este post tenéis más curiosidad, podéis ampliar leyendo el caso de los elementos flotados.
Ejemplo
Vamos a ver como los elementos no posicionados son colocados primero aunque aparezcan los últimos en el HTML:
<style>
.azul, .rojo, .verde {
position: absolute;
}
</style>
<div class="rojo">
<div class="verde"></div>
</div>
<div class="gris"></div>
<div class="azul"></div>Cómo utilizar z-index
Con la propiedad z-index podemos cambiar el orden predeterminado que hemos visto antes. Simplemente se especifica el número de orden: z-index: 1, z-index: 2, etc. También puede tomar valores negativos: z-index: -1, z-index: -2, etc.
A mayor valor más arriba se representará el elemento. Si dos elementos tienen el mismo valor, el que sea definido antes se colocará primero.
Pero hay que tener dos cosas muy claras:
- La propiedad z-index solo se aplica a elementos posicionados. Los elementos no posicionados siempre se van a colocar uno en encima de otro en el orden en el que aparecen en el código.
- La propiedad z-index no es heredable.
- Definir la propiedad z-index con un valor diferente a auto crea un stacking context, un contexto de apilamiento. También se crea un stacking context en todos los elementos con position: fixed o sticky. Luego veremos qué significa esto.
Ejemplo
Si ahora cambiamos el CSS anterior por este:
.gris, .rojo, .verde {
position: absolute;
}
.gris {
z-index: 2;
}
.verde {
z-index: 3;
}
.azul {
z-index: 100; // Sin efecto, es un elemento no-posicionado.
}
El elemento verde se ha posicionado en lo más alto de eje zComo se mencionó antes, el stacking context se crea en todos los elementos posicionados fixed o sticky, y en los posicionados con relative y absolute que además tengan un z-index diferente a auto. Y ese es nuestro caso, el elemento rojo está posicionado en absolute pero no tiene z-index, por tanto, este elemento no crea un nuevo contexto de apilamiento y su elemento hijo (el verde) se ordena en el contexto superior, que en este caso es el mismo contexto que el elemento gris.
Vamos a ver como se puede crear un nuevo stacking context. Imaginemos que introducimos un elemento más:
<div class="rojo">
<div class="verde"></div>
</div>
<div class="gris"></div>
<div class="amarillo"></div>
<div class="azul"></div>.gris, .rojo, .verde, .amarillo {
position: absolute;
}
.amarillo {
z-index: 0;
}
.rojo {
z-index: 1;
}
.gris {
z-index: 2;
}
.verde {
z-index: 3;
}
.azul {
z-index: 100; // Sin efecto, elemento no posicionado
}
Se ha creado un nuevo contexto de apilamiento en el elemento rosaAntes, el elemento verde y el gris se ordenaban en el mismo contexto de apilamiento, pero ahora, el elemento rojo ha creado un nuevo contexto de apilamiento, pues cumple dos reglas: es un elemento posicionado con absolute y tiene un z-index diferente de auto.
Así que el z-index del elemento verde ahora se aplica al contexto de apilamiento creado por su elemento contenedor.
El stacking context se crea en otras muchas más situaciones, tantas que cuesta recordarlas todas, entre las más habituales:
- Elemento raíz del documento
- Elementos position: absolute y position: relative con un valor z-index diferente de auto
- Elementos position: fixed y position: sticky
- Elementos con opacity menor a 1
- Elemento dentro de un contenedor flex y un valor z-index diferente de auto.
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!