Índice z y contextos de apilamiento

Podcast de CSS - 019: Índice z y contextos de pila

Supongamos que tiene un par de elementos que están absolutamente posicionados, y deben ubicarse una encima de la otra. Puedes escribir un poco de HTML como el siguiente:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

Pero ¿cuál se ubica encima de la otra de forma predeterminada? Para saber qué elemento haría eso, debes entender el índice z y los contextos de apilamiento.

Índice z

La z-index establece de manera explícita un orden de capas para HTML basado en el espacio 3D del navegador: el eje Z. Este es el eje que muestra qué capas están más cerca y más lejos de ti. El eje vertical en la web es el eje Y, y el eje horizontal es el eje X.

La propiedad z-index acepta un valor numérico que puede ser positivo o negativo. Los elementos aparecerán sobre otro si tienen un valor de z-index más alto. Si no se establece un z-index en tus elementos el comportamiento predeterminado es que el orden de la fuente del documento determina el eje Z. Esto significa que los elementos que están más abajo en el documento se ubican sobre los que aparecen antes de ellos.

En un flujo normal, Si estableces un valor específico para z-index y no funciona, Debes establecer el valor position del elemento en un valor distinto de static. Este es un lugar común donde las personas tienen problemas con z-index.

Sin embargo, este no es el caso si estás en un contexto de flexbox o cuadrícula. porque puedes modificar el índice z de los elementos flexibles o de cuadrícula sin agregar position: relative.

Índice z negativo

Para colocar un elemento detrás de otro, haz lo siguiente: agregar un valor negativo para z-index.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

Mientras .my-element tenga el valor inicial de z-index de auto, el elemento .child se ubicará detrás de él.

Agrega el siguiente CSS a .my-element: y el elemento .child no se ubicará detrás de él.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

Porque ahora .my-element tiene un valor position que no es static y un valor z-index que no sea auto, Se creó un nuevo contexto de pila. Esto significa que, incluso si configuras .child para que tenga un z-index de -999, aun así no se quedaría detrás de .my-parent.

Contexto de apilado

Un contexto de apilado es un grupo de elementos que tienen un elemento superior común y se mueven juntos hacia arriba y hacia abajo en el eje z.

En este ejemplo, el primer elemento superior tiene un z-index de 1, lo que crea un nuevo contexto de apilado. Su elemento secundario tiene un z-index de 999. Junto a este elemento superior, hay otro elemento superior con un elemento secundario. El elemento superior tiene un z-index de 2 y el elemento secundario también tiene un z-index de 2. Debido a que ambos elementos superiores crean un contexto de apilado, El z-index de todos los elementos secundarios se basa en el del elemento superior.

El z-index de los elementos dentro de un contexto de pila siempre son relativas al orden actual del elemento superior en su propio contexto de apilado.

Crear un contexto de pila

No es necesario que apliques z-index ni position para crear una nueva contexto de pila. Puedes crear un nuevo contexto de apilado agregando un valor para las propiedades que crean una nueva capa compuesta. como opacity, will-change y transform. Puedes consulta la lista completa de propiedades aquí.

Para explicar qué es una capa compuesta, imagina que una página web es un lienzo. Un navegador toma tu código HTML y CSS, y los usa para decidir qué tan grande es el lienzo. Luego pinta la página en este lienzo. Si un elemento cambiara, digamos cambia de posición: el navegador tiene que regresar y rehacer qué pintar.

Para mejorar el rendimiento el navegador crea nuevas capas compuestas que se superponen al lienzo. Son un poco como notas adhesivas: mover una y cambiarla no tiene un gran impacto en el lienzo general. Se crea una nueva capa compuesta para elementos con opacity, transform y will-change porque es muy probable que cambien, para que el navegador se asegure de que el cambio tenga el mejor rendimiento posible usando la GPU para aplicar los ajustes de estilo.

Recursos

• Cómo forzar capas
• Guía de animaciones: Cómo forzar la creación de capas
• Información sobre el índice z

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el índice z

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>