¿Qué es un contexto de apilamiento (stacking context) en CSS?
Entiende qué es un contexto de apilamiento en CSS: una unidad de elementos que se apilan juntos, aislando el comportamiento de z-index en su interior.
Un contexto de apilamiento (stacking context) en CSS es un concepto fundamental para entender cómo los elementos HTML se superponen unos a otros en el eje Z (es decir, su orden de profundidad visual en la pantalla, determinando cuál aparece encima de cuál).
Imagina un contexto de apilamiento como una unidad o grupo de elementos que se apilan juntos y se mueven como un todo en el orden de apilamiento general de la página.
Dentro de un contexto de apilamiento dado:
- Los elementos hijos se apilan según sus propios valores de
z-indexy otras reglas de apilamiento (como el orden en el DOM), pero solo en relación con otros elementos dentro de ese mismo contexto de apilamiento. - El contexto de apilamiento completo se trata luego como una única capa o «lámina» que se apila en su contexto de apilamiento padre, según el
z-indexdel elemento que creó este contexto hijo.
¿Cuándo se crea un nuevo contexto de apilamiento?
No todos los elementos crean un nuevo contexto de apilamiento. Se forma uno nuevo cuando un elemento cumple ciertas condiciones. Las más comunes son:
- El elemento raíz del documento (
<html>). - Un elemento con una propiedad
positioncon valorabsolute,relative,fixedostickyy una propiedadz-indexcon un valor numérico (es decir, cualquier valor que no seaauto). - Un elemento que es un contenedor Flexbox y tiene un hijo con un
z-indexnumérico. - Un elemento que es un contenedor Grid y tiene un hijo con un
z-indexnumérico. - Un elemento con una propiedad
opacitymenor que1. - Un elemento con una propiedad
transform(distinta denone). - Un elemento con una propiedad
filter(distinta denone). - Un elemento con una propiedad
perspective(distinta denone). - Un elemento con
will-changeespecificando alguna propiedad que cree un contexto de apilamiento. - Un elemento con
contain: paint;,contain: layout;,contain: content;ocontain: strict;.
¿Por qué es importante?
Los contextos de apilamiento son cruciales porque aíslan el comportamiento del z-index. Un elemento con un z-index muy alto dentro de un contexto de apilamiento A no necesariamente aparecerá por encima de un elemento con un z-index bajo que pertenezca a un contexto de apilamiento B, si el contexto A en su conjunto está apilado por debajo del contexto B.
En resumen, el z-index de un elemento solo tiene significado dentro de su contexto de apilamiento. Para que un elemento con un z-index alto se muestre por encima de otro, no solo su z-index debe ser mayor, sino que también el contexto de apilamiento al que pertenece debe estar en una posición superior o igual en la pila general en comparación con el contexto del otro elemento. Entender esto es vital para evitar sorpresas y gestionar la superposición de elementos de forma predecible en diseños complejos.
