¿Qué es el contexto de apilamiento de CSS? ¿Te suena de algo?
¿No te ha pasado que por más que coloques z-index: 999
, el elemento sigue permaneciendo debajo del elemento que quieres colocar encima?
Este tipo de fallos es bastante común y la razón frecuente es no saber sobre el contexto de apilamiento que tiene CSS.
Hoy te contaré acerca de qué trata y cómo puedes solucionar los problemas que surgen por aplicar un mal apilamiento, sin fallar en el intento.
¿Qué es el el contexto de apilamiento?
El apilamiento no es nada más ni nada menos que colocar un elemento encima de otro, como si fuera una pila. Si has utilizado Photoshop, podrás ver que al editar una foto puedes crear capas, que están apilada una debajo de la otra.
En el caso del HTML, lo define en un plano tridimencional en el eje Z. Los elementos del HTML se ordenan de manera prioritaria según sus atributos.
![Apilamiento de capas](https://i0.wp.com/darkusphantom.com/wp-content/uploads/2022/07/capas-58776c6d-25e7-4dc9-9970-8f4167467daf.jpg?resize=599%2C380&ssl=1)
Un dato a tomar en cuenta es que los contexto de apilamiento pueden ser contenidos de otros contexto de apilamiento, y así crear una jerarquía, como también
Ojo: Con esto hay que tener cuidado. Normalmente es donde uno suele fallar al tratar de colocar un elemento encima del otro y este sigue permaneciendo debajo.
¿En qué parte del HTML se aplica el concepto de apilamiento?
Este concepto se aplica en cualquier parte del documento, conformado por:
- El elemento raiz (HTML).
- El elemento con
position
absoluta
orelativa
, con un valorz-index
distinto de «auto
«. - El elemento tenga
Position:fixed
. - Un elemento
flex
con un valorz-index
distinto de “auto
” y que sea el elemento padredisplay: flex/inline-flex
. - Los elementos con un valor
opacity
menor de 1. - Los elementos con un valor
transform
distinto de “none
”. - Los elementos con valor
mix-blend-mode
distinto de “normal
”. - Los elementos con valor
filter
distinto de “none
”. - Los elementos con un valor
perspective
distinto de “none
”. - Los elementos con un valor
isolation
igual a “isolate
”. - Especificar cualquier atributo superior en
will-change
. Incluso si no especificas valores para estos atributos directamente. - Elementos con un valor
webkit-overflow-scrolling
igual a “touch
”.
Solución al problema
Veamos un ejemplo. Digamos que tenemos esta estructura en el HTML:
- Raiz
- Div #1 (z-index: 5)
- Div #2 (z-index: 2)
- Div #3 (z-index: 4)
- Div #4 (z-index: 6)
- Div #5 (z-index: 1)
- Div #6 (z-index: 3)
![Apilamiento de capas a nivel de HTML y CSS, con position y z-index](https://i0.wp.com/darkusphantom.com/wp-content/uploads/2022/07/captura-de-pantalla_2022-07-24_20-01-18-1-1.png?resize=646%2C366&ssl=1)
- DIV #4 se renderiza debajo de DIV #1 porque el z-index (5) del DIV#1 es válido dentro del contexto de apilamiento del elemento raiz, También el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV#4 pertenece a DIV #3, que tiene un valor z-index menor.
- Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1), porque DIV #5 pertenece a DIV #3 con un z-index mayor.
- El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 y DIV #6, porque pertenece a un contexto de apilamiento diferente.
Utilicé esta información como referencia Contexto de Apilamiento de la documentación de MDN. Pueden echarle un vistazo para obtener más información.
¿Qué te ha parecido el contexto de apilamiento de CSS? ¿Este error te ha pasado antes y cómo lo has solucionado? Cuéntamelo en los comentarios.
Sígueme en mis redes:
Últimas entradas
Más entradas
Novedades de ES9
En este post, exploraremos las principales características introducidas en ES9. Estas características pueden ayudarte a…
Novedades de ES7 en JavaScript
ES7 introdujo dos características nuevas para mejorar el desarrollo en JavaScript. Ahora te enseñaré cuales…
Introducción a Angular: Componentes, Decoradores y Data Binding
En el post de introducción a Angular te hablé en general sobre el framework. En…