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?
display
relative
position
static
.animation
¿flexbox y la cuadrícula necesitan position: relative
?
position: relative
.