¿Qué es el contexto de apilamiento de CSS?

¿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.

Tabla de contenidos

¿Qué es el el contexto de apilamiento?
¿En qué parte del HTML se aplica el concepto de apilamiento?
Solución al problema
Últimas entradas
Más entradas

¿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 — Apilamiento en el eje z, utilizando como ejemplo las capas de Photoshop

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 o relativa, con un valor z-index distinto de «auto«.
El elemento tenga Position:fixed.
Un elemento flex con un valor z-index distinto de “auto” y que sea el elemento padre display: 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 — Estructura del ejemplo en el HTML aplicando el contexto de apilamiento

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.