Capas con z-index
Demostración Visual
Contexto de Apilamiento
Un contexto de apilamiento se forma por cualquier elemento que cumpla criterios específicos (como opacity < 1 o transform). Una vez formado, sus hijos quedan contenidos dentro de ese contexto.
opacity: 0.9
filter: blur()
transform: scale(1)
will-change
contexto_demo.css
.parent {
position: relative;
z-index: 1; /* Crea un contexto */
}
.child {
position: absolute;
z-index: 999; /* ¡Atrapado! */
}Hijo (999)
Padre (z:1)Vecino (z:2)
Errores Comunes
Posición Estática
z-index se ignora en elementos con position: static (el valor por defecto). Usa siempre relative, absolute o fixed.
Opacidad y Transformaciones
Establecer opacity < 1 o usar transform crea un nuevo contexto de apilamiento, incluso sin un valor de z-index.
La Guerra del ‘9999’
Evita valores de z-index arbitrariamente altos. Usa una escala consistente (10, 20, 30) para mantener tus capas bajo control.