Z-index en CSS
La lección de Position colocó las cajas. z-index responde la siguiente pregunta: cuando dos cajas se solapan, ¿cuál queda más cerca del lector? Piensa en hojas de papel sobre un escritorio — las de arriba cubren las de abajo. Aprende las reglas cotidianas antes de inventar números enormes.
Un kit de herramientas z-index
📊 Z-index de un vistazo
| Idea | Trabajo cotidiano |
|---|---|
z-index |
Define el orden de pintura entre hermanos que se solapan en el mismo stacking context |
| Primero posicionado | Suele necesitar position distinto de static (o ciertos hijos de layout moderno) |
| Gana el mayor | Enteros más grandes se pintan después — aparecen encima |
auto |
Por defecto — seguir el orden del documento y las reglas del contexto padre |
| Stacking context | Una «jaula» — los hijos se comparan entre sí, no con toda la página |
| Escala calmada | Prefiere pasos pequeños (1, 2, 10) y roles con nombre frente a carreras de 9999 |
z-index no mueve una caja a la izquierda ni a la derecha. Solo cambia quién cubre a quién cuando las cajas ya comparten el mismo espacio en pantalla.
Sube una insignia por encima de su tarjeta
Dale a la tarjeta un hogar posicionado y luego eleva la insignia con un z-index modesto. El orden de hermanos puede bastar, pero una capa explícita hace legible la intención.
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
Overlay por encima de la página
Los modales y cajones suelen situarse por encima del contenido ordinario. Empareja un overlay posicionado con un número de capa claro — y mantén el contenido de la página más abajo a propósito.
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
Compara hermanos, no el mundo entero
Entre hermanos en un contexto, gana el z-index más alto. Si los valores empatan, los hermanos posteriores en el DOM suelen pintarse encima. Empieza las comparaciones dentro de un padre antes de perseguir guerras a escala de página.
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
Los stacking contexts enjaulan a los hijos
Un padre con su propio stacking context (por ejemplo posicionado + z-index) puede atrapar a los hijos. Un hijo con z-index: 999 no salta por encima de un hermano fuera de ese padre si el padre mismo está más abajo. Corrige la capa del padre — no solo infles al hijo.
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
Un hábito z-index calmado
Nombra roles (--layer-badge, --layer-modal) o usa una escala pequeña. Evita 99999 salvo al depurar. Recuerda: la colocación es position; el apilado es z-index; el clear de float espera en las siguientes lecciones.
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
Pruébalo tú mismo
- Coloca una insignia absolute en una tarjeta relative y pon
z-index: 2. - Construye un fondo/modal fixed con
z-index: 10sobre el contenido de la página en1. - Da a dos hermanos absolute solapados valores z-index distintos e intercámbialos.
- Anida un hijo con z-index alto dentro de un padre con z-index bajo — observa la jaula.
- Reescribe un «9999» en una escala de custom properties con nombre.
Errores comunes
- Esperar que
z-indexen una cajastaticsimple reordene todo - Combatir stacking contexts solo subiendo al hijo anidado
- Competir con
99999en lugar de una escala legible - Tratar esta lección como Position (colocación) o Display (tipo de caja)
- Usar z-index para inventar columnas de página en vez de herramientas de layout
Resumen
z-indexcontrola quién se pinta encima cuando las cajas se solapan- Suele necesitar position no static (o casos especiales de layout)
- Los valores más altos ganan dentro del mismo stacking context
- Los contextos padre pueden enjaular hijos — corrige el nivel adecuado
- Prefiere escalas pequeñas con nombre; deja float para las próximas lecciones
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior