También disponible en: English · Português · Français · العربية
Contexto de apilamiento CSS: por qué no funciona tu z-index
Pega el CSS de un elemento y averigua si el z-index se le aplica, si crea un contexto de apilamiento y qué especificación lo dice.
¿Qué es un contexto de apilamiento?
Un contexto de apilamiento es un grupo de elementos que se pintan juntos como una unidad. Dentro de él manda el z-index; fuera, el grupo entero se coloca como una sola pieza y sus hijos no pueden salirse. Esa frase está detrás de casi cualquier problema de z-index: un hijo con 999999 no compite con el resto de la página, solo con sus hermanos dentro del mismo contexto.
La otra mitad del lío es que muchas veces el z-index no hace nada en absoluto. CSS 2.2 le da a la propiedad una línea de «se aplica a» que dice elementos posicionados, así que en un elemento estático no es una declaración débil: no se aplica. Por eso subir el número nunca ayuda.
Esta herramienta responde a las dos preguntas a partir del CSS que pegues, y nombra la especificación que hay detrás de cada respuesta, porque las reglas están repartidas por siete documentos distintos y ninguno las reúne todas.
Cómo usarla
- Pega las declaraciones del elemento. Una por línea o separadas por punto y coma. Los tres botones de ejemplo cubren los casos más habituales: un z-index que se ignora en silencio, una opacidad que crea un contexto que nadie espera y un modal fijo que atrapa todo lo que lleva dentro.
- Indica qué es el padre. Bloque, flex o grid. Importa más de lo que parece: el mismo z-index es inerte en un padre de bloque y funciona en uno flex o grid, y ese único control es la diferencia entre las dos respuestas.
- Lee los dos veredictos y luego los motivos. El primero dice si el z-index se aplica. El segundo dice si este elemento atrapa a sus descendientes, con cada causa junto a la especificación que la define.
La excepción de flex y grid que casi todo el mundo se salta
La regla que la gente lleva en la cabeza es que el z-index solo funciona en elementos posicionados. Es casi cierta, y la excepción está escrita en dos especificaciones con las mismas palabras. CSS Flexbox dice que, en los ítems flex, los valores de z-index distintos de auto crean un contexto de apilamiento aunque position sea static. CSS Grid repite la frase exacta para los ítems grid.
Así que la misma declaración se comporta de dos maneras según el padre. Dentro de un contenedor de bloque normal, un elemento estático con z-index: 999999 es inerte y no crea ningún contexto. Mueve ese elemento a un contenedor flex sin tocar ni un carácter de su propio CSS y el z-index pasa a aplicarse y a crear un contexto. Esta herramienta tiene un control para el padre solo por eso: es la única entrada que cambia la respuesta sin cambiar el CSS.
Hay una sorpresa gemela por el otro lado. Con el z-index en auto, relative y absolute no crean contexto de apilamiento, mientras que fixed y sticky lo crean siempre. La especificación de posicionamiento de CSS lo dice sin rodeos: las cajas con posición fija o pegajosa forman igualmente un contexto de apilamiento. O sea que la mitad de los valores de position se comportan de una manera y la otra mitad de otra, justo en el valor que nunca pones a propósito.
La invisible: la opacidad
De las diecisiete causas que lista esta página, la opacidad es la que conviene memorizar, porque nada en pantalla la delata. Un elemento con opacity: 0.999 se ve exactamente igual que uno con opacity: 1 —no los distingues a ningún nivel de zoom— y sin embargo el primero crea un contexto de apilamiento y el segundo no. De golpe todos los descendientes quedan atrapados, y un desplegable que antes salía por encima de la cabecera ahora sale por detrás.
La misma trampa viene en varias formas más. Un transform de cualquier tipo, un filter, un backdrop-filter, un clip-path, una máscara, un mix-blend-mode distinto de normal, isolation: isolate, contain con paint o layout, y will-change nombrando cualquiera de esas propiedades crean contexto. Varias se añaden por rendimiento o por un efecto de hover, y quien las puso no estaba pensando en el orden de pintado.
Por eso el arreglo de un z-index atascado casi nunca es un número más grande. Es encontrar al antepasado que está atrapando y decidir si debería. La herramienta informa de todas las causas que encuentra, no de la primera, porque es muy frecuente que un elemento tenga tres o cuatro a la vez y quitar solo una no cambie nada.
Límites declarados
Esto analiza un elemento cada vez. El contexto de apilamiento es una propiedad de un elemento, pero el problema es una propiedad del árbol: para saber si tu modal está atrapado hay que mirar sus antepasados uno a uno, y la herramienta no los ve desde un solo bloque de CSS. Lo que te da es la respuesta por elemento para ir subiendo con ella.
Lee las declaraciones al pie de la letra y no resuelve la cascada, las propiedades personalizadas, los atajos ni las media queries. Si tu opacidad viene de una clase que no pegaste, o de un var() definido en otro sitio, esto no puede saberlo. Pega los estilos calculados del inspector de tu navegador si quieres certeza.
La lista de causas es el conjunto definido en las especificaciones que se citan junto a cada fila, y no está cerrada: las especificaciones de CSS siguen añadiendo. contain y will-change son incorporaciones recientes, y no hay ningún documento normativo único que las liste todas, y por eso justamente cada fila lleva su propia cita en vez de apuntar a una sola página.
Los nombres de las especificaciones se quedan en inglés en todas las versiones de esta página, porque son identificadores de documento y no prosa. Quien vaya a buscarlos necesita la cadena que publicó el organismo.
¿Por qué es gratis?
Es análisis de texto y corre en tu navegador. No hay ningún servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.
No se sube nada y no se guarda nada. Recarga la página y habrá olvidado tu CSS.