Si z-index en CSS no funciona, el problema suele estar en el contexto de apilamiento, no en que el número sea pequeño. Un elemento no puede escapar del contexto de su ancestro solo por recibir un valor enorme.
La propiedad participa en el orden de las capas. Actúa en elementos posicionados y también en elementos flex o grid en condiciones donde no necesitan dejar de ser static.
Ejemplo básico de dos capas
<div class="escena">
<div class="capa primera">Primera capa</div>
<div class="capa segunda">Segunda capa</div>
</div>
<style>
.escena { position: relative; min-height: 220px; }
.capa { position: absolute; width: 180px; padding: 32px 12px; }
.primera { top: 0; left: 0; background: #dbeafe; z-index: 1; }
.segunda { top: 60px; left: 80px; background: #1d4ed8; color: white; z-index: 2; }
</style>Las cajas se solapan y, dentro del mismo contexto, la segunda queda delante por su nivel superior. Cambia sus valores para observar el resultado.
Qué es un contexto de apilamiento
Es un grupo cuyos descendientes se apilan internamente y que participa como una unidad en el contexto superior. Un hijo con nivel 999 no puede adelantar por sí solo a un grupo hermano situado por delante de su grupo padre.
Entre las situaciones que pueden crear contextos están un elemento posicionado con z-index distinto de auto, opacity menor que 1, una transformación no nula y isolation: isolate. Los elementos fixed y sticky también crean contextos.
El caso típico: un menú queda detrás
.cabecera { position: relative; z-index: 1; }
.menu { position: absolute; z-index: 9999; }
.contenido { position: relative; z-index: 2; }Si cabecera y contenido son grupos hermanos y el menú pertenece a la cabecera, aumentar solo el menú no resuelve la relación entre esos grupos. Revisa si la cabecera debe estar delante o si el componente está colocado en un lugar incorrecto del documento.
No subas todas las capas indiscriminadamente. Decide el orden general: contenido, cabecera, desplegables y avisos según las necesidades reales.
Cómo diagnosticarlo paso a paso
- Selecciona el elemento que queda detrás.
- Comprueba si su contexto admite el z-index que esperas.
- Recorre sus ancestros buscando position, transform, opacity e isolation.
- Compara los ancestros que participan en el mismo contexto superior.
- Desactiva temporalmente la propiedad sospechosa en el inspector.
Haz cambios pequeños y observa cuál altera el resultado. Así evitas dejar un conjunto de números enormes sin explicación.
Z-index no soluciona un recorte por overflow
Si un contenedor recorta el desplegable con overflow: hidden o una configuración similar, aumentar la capa no elimina ese recorte. Revisa la estructura y el motivo del overflow antes de cambiarlo: puede estar protegiendo otro diseño.
Cómo organizar las capas
:root {
--capa-cabecera: 10;
--capa-desplegable: 20;
}
.cabecera { position: sticky; top: 0; z-index: var(--capa-cabecera); }Las variables facilitan mantener una escala, pero no anulan los contextos. Un diálogo abierto con showModal() participa en la capa superior del navegador; no se reproduce ese comportamiento simplemente con un z-index alto.
Preguntas frecuentes
¿Puedo utilizar valores negativos?
Sí, pero pueden colocar contenido detrás de fondos y hacerlo difícil de ver. Revisa el contexto completo.
¿Z-index siempre requiere position relative?
No. Relative es una opción, no un requisito universal; por ejemplo, los elementos flex y grid tienen reglas específicas.
Continúa practicando en los tutoriales de CSS y utiliza tu editor para mantener los cambios documentados.
Referencia técnica: documentación de MDN.
