Explicación del índice Z: cómo apilar elementos usando CSS

Foto de All Bong en Unsplash

Siempre he tenido problemas con el índice z de la propiedad CSS. Suena muy fácil al principio. Los elementos con un valor de índice z más alto se muestran frente a aquellos con un valor de índice z más bajo. Aún así, muchas veces terminé en situaciones en las que parece que el valor del índice z no tuvo ningún efecto.

Decidí que ya tenía suficiente prueba y error con el índice z y que quería comprenderlo mejor. Espero que este artículo pueda ayudarlo para que nunca se pregunte por qué z-index no está haciendo lo que espera que haga.

Orden de apilamiento predeterminado

Mencionemos primero el orden predeterminado en el que el navegador apila los elementos, cuando no se aplica el índice z:

  1. Elemento raíz (el elemento )
  2. Elementos no posicionados en el orden en que se definen
  3. Elementos posicionados en el orden en que se definen

Un elemento no posicionado es un elemento con el valor de posición predeterminado estático. Un elemento posicionado es un elemento con cualquier otro valor de posición. Ejemplos de otros valores son: absoluto, relativo, fijo o fijo.

HTML:

  

CSS:

/ * Este es solo el CSS que es relevante para el ejemplo. Para ver el CSS completo, consulte los enlaces debajo de las imágenes. * /
.blue, .pink, .orange {
  posición: absoluta;
}
https://codepen.io/ivhed/pen/QrdEBB

Definimos el cuadro verde último en el documento. Aún así, aparece detrás de los demás porque no está posicionado.

Apilamiento con índice z

Si ahora queremos cambiar el orden de apilamiento de estos elementos, podemos usar la propiedad z-index. Un elemento con un índice z más alto se mostrará delante de un elemento con un índice z más bajo. Una cosa a tener en cuenta es que el índice z solo funciona con elementos posicionados.

.blue, .pink, .orange {
  posición: absoluta;
}
.blue {
  índice z: 2;
}
.naranja {
  índice z: 3;
}
.verde {
  índice z: 100; // no tiene efecto ya que el cuadro verde no está posicionado
}
https://codepen.io/ivhed/pen/xjqmpV

El cuadro naranja con un índice z más alto se muestra delante del cuadro azul.

Contexto de apilamiento

Supongamos que agregamos otro cuadro posicionado al diseño que queremos colocar detrás del cuadro rosa. Actualizamos nuestro código a lo siguiente:

HTML:

  

CSS:

.blue, .pink, .orange, .purple {
  posición: absoluta;
}
.púrpura {
  índice z: 0;
}
.rosado {
  índice z: 1;
}
.blue {
  índice z: 2;
}
.naranja {
  índice z: 3;
}
.verde {
  índice z: 100;
}
https://codepen.io/ivhed/pen/YLZdjx

Nuestro cuadro rosa se muestra frente al cuadro púrpura como se esperaba, pero ¿qué pasó con el cuadro naranja? ¿Por qué está de repente detrás del azul a pesar de que tiene un índice z más alto? Esto se debe a que agregar un valor de índice z a un elemento forma lo que se llama un contexto de apilamiento.

El cuadro rosa tiene un valor de índice z distinto de auto, que forma un nuevo contexto de apilamiento. El hecho de que forme un contexto de apilamiento afecta cómo se muestran sus elementos secundarios.

Es posible cambiar el orden de apilamiento de los elementos secundarios de la caja rosa. Sin embargo, su índice z solo tiene un significado dentro de ese contexto de apilamiento. Esto significa que no podremos mover el cuadro naranja delante del cuadro azul, porque ya no están dentro del mismo contexto de apilamiento.

Si queremos que el cuadro azul y el cuadro naranja formen parte del mismo contexto de apilamiento, podemos definir el cuadro azul como un elemento secundario del cuadro rosa. Esto hará que el cuadro azul aparezca detrás del naranja.

  
  
https://codepen.io/ivhed/pen/erGoJE

Los contextos de apilamiento no solo se forman cuando se aplica el índice z a un elemento. Hay varias otras propiedades que hacen que los elementos formen contextos de apilamiento. Algunos ejemplos son: filtro, opacidad y transformación.

Volvamos a nuestro ejemplo anterior. La caja azul vuelve a ser un hermano de la caja rosa. Esta vez, en lugar de agregar el índice z al cuadro rosa, le aplicamos un filtro.

HTML:

  

CSS:

.blue, .pink, .orange {
  posición: absoluta;
}
.rosado {
  filtro: hue-rotate (20deg);
}
.blue {
  índice z: 2;
}
.naranja {
  índice z: 3;
}
.verde {
  índice z: 100;
}
https://codepen.io/ivhed/pen/LmWMQb

El cuadro naranja todavía tiene un índice z más alto que el azul, pero aún se muestra detrás de él. Esto se debe a que el valor del filtro hizo que el cuadro rosa formara un nuevo contexto de apilamiento.

Resumen

Al usar el índice z en elementos posicionados, podemos cambiar el orden de apilamiento predeterminado.

Al aplicar ciertas propiedades CSS, un elemento puede formar un contexto de apilamiento. Los valores del índice Z solo tienen un significado dentro del mismo contexto de apilamiento.

Para obtener más información sobre el índice z, recomiendo este artículo. Obtuve mucha inspiración al escribir esto.

¡Gracias por leer! :)