El podcast de CSS - 019: Índice z y contextos de pila
Supongamos que tienes un par de elementos que están posicionados de manera absoluta y se supone que deben estar uno encima del otro. Puedes escribir un fragmento de un código 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 del otro de forma predeterminada? Para saber qué elemento haría eso, necesitas comprender el índice z y los contextos de apilado.
Índice z
La propiedad z-index establece explícitamente un orden de capas para HTML basado en el espacio 3D del navegador: el eje Z.
Este es el eje que muestra las capas más cercanas y alejadas de ti.
El eje vertical en la Web es el eje Y y el horizontal es el eje X.
La propiedad z-index acepta un valor numérico que puede ser positivo o negativo.
Los elementos aparecerán encima de otro si tienen un valor de z-index más alto.
Si no se establece z-index en tus elementos, el comportamiento predeterminado es que el orden de origen del documento dicta el eje Z.
Esto significa que los elementos más abajo en el documento se sitúan sobre los elementos que aparecen antes de ellos.
En el 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 los usuarios tienen dificultades con z-index.
Sin embargo, este no es el caso si estás en un contexto de flexbox o cuadrícula, ya que puedes modificar el índice z de los elementos flexibles o de cuadrícula sin agregar position: relative.
Índice z negativo
Para establecer un elemento detrás de otro, agrega un valor negativo para z-index.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Siempre que .my-element tenga el valor inicial de z-index de auto, se ubicará el elemento .child 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);
}
Como .my-element ahora tiene un valor position que no es static y un valor z-index que no es auto, creó un nuevo contexto de apilado.
Esto significa que, incluso si configuras .child para que tenga un z-index de -999, no se quedará detrás de .my-parent.
Contexto de apilamiento
Un contexto de apilado es un grupo de elementos que tienen un elemento superior en 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, por 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 apilado siempre es relativo al orden actual del elemento superior en su propio contexto de apilado.
Cómo crear un contexto de apilado
No es necesario que apliques z-index ni position para crear un contexto de apilado nuevo.
Puedes crear un contexto de apilado nuevo agregando un valor para las propiedades que crean una nueva capa compuesta, como opacity, will-change y transform.
Puedes
ver una lista completa de propiedades aquí.
Para explicar qué es una capa compuesta, imagina que una página web es un lienzo. Un navegador toma tus elementos HTML y CSS y los usa para determinar el tamaño del lienzo. Luego, pinta la página en este lienzo. Si un elemento fuera a cambiar (por ejemplo, si cambia de posición), el navegador debe regresar y volver a pensar qué pintar.
Para mejorar el rendimiento, el navegador crea nuevas capas compuestas que se superponen con el lienzo.
Estas notas se parecen un poco a las notas adhesivas:
mover una y modificarla no tiene un gran impacto en el lienzo general.
Se crea una nueva capa compuesta para los elementos con opacity, transform y will-change, ya que es muy probable que cambien, por lo que el navegador se asegura de que el cambio tenga el mejor rendimiento posible usando la GPU para aplicar 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 del índice z
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
¿Qué artículo aparece arriba de forma predeterminada?
Si el índice z no funciona, ¿qué propiedad deberías inspeccionar en tu elemento?
displayrelativepositionstatic.animation¿flexbox y la cuadrícula necesitan position: relative?
position: relative.