CSS
Explica cómo funcionan z-index, el orden de pintado y los stacking contexts que aíslan niveles y provocan conflictos de superposición.
ordena cajas dentro de contextos de apilamiento; no es una profundidad global del documento.
z-index.modal {
position: fixed;
z-index: 100;
}El navegador pinta fondos, contenido, positioned descendants y otros grupos según un orden definido. DOM order puede desempatar cuando otros factores coinciden.
Causas comunes:
La lista evoluciona; identifica el contexto real en DevTools.
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 9999;
}El child se ordena dentro de parent. Si otro sibling context está por encima de parent, el child no lo supera.
z-index: auto no siempre crea un nuevo context. z-index: 0 en un positioned/flex/grid item puede crearlo.
Esa diferencia afecta descendientes.
.decoration {
position: absolute;
z-index: -1;
}Puede quedar detrás del background del parent o volverse inaccesible visualmente según contextos. No lo uses sin comprender el painting order.
.component {
isolation: isolate;
}Crea un stacking context explícito y limita blending con contenido externo. Es útil para componentes con capas internas.
Dialog modal, popovers y fullscreen pueden entrar al top layer, que se pinta por encima de stacking contexts normales.
<dialog>...</dialog>Subir z-index no supera el top layer. Usa las primitivas correctas para overlays.
:root {
--z-base: 0;
--z-sticky: 10;
--z-overlay: 20;
--z-toast: 30;
}Los tokens ayudan, pero solo dentro de una arquitectura de stacking contexts conocida.
Revisa:
¿Por qué un child con z-index: 9999 puede quedar debajo de un sibling con z-index: 2?
Porque el child está atrapado en un parent stacking context que compite como una sola unidad por debajo del sibling context.
Flexbox inicia los modelos modernos de layout.