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>
¿Cuál de los siguientes artículos aparece en la parte superior de forma predeterminada?
Si el índice z no funciona, ¿qué propiedad deberías inspeccionar en el elemento?
relative
display
position
animation
¿flexbox y la cuadrícula necesitan position: relative
?