¿Alguna vez has puesto un z-index: 9999 a un elemento y, aun así, se queda tercamente detrás de otro que tiene un z-index: 1? 🤯
No es un bug del navegador. Es simplemente que has entrado en un nuevo Contexto de Apilamiento (Stacking Context).
En este post vamos a desmitificar por qué sucede esto y cómo dominar las capas en CSS de una vez por todas.
1. El mito del z-index infinito
Muchos desarrolladores creen que el z-index es una competencia global en toda la página. La realidad es que es una competencia local.
Imagina que cada "Contexto de Apilamiento" es una carpeta diferente. No importa qué tan alto sea el número de un documento dentro de la Carpeta A, si la Carpeta A está debajo de la Carpeta B, el documento nunca se verá por encima.
2. ¿Qué crea un contexto de apilamiento?
No solo el z-index genera estas "carpetas". Aquí están los sospechosos habituales:
- El elemento raíz ().
- Elementos con position: absolute o relative con un valor de z-index distinto de auto.
- Elementos con opacity menor a 1.
- Elementos con transform, filter o perspective distintos de none.
- El uso de display: flex o grid en el contenedor padre.
- Ejemplo rápido en código
<div class="padre" style="opacity: 0.99; z-index: 10;">
<div class="hijo" style="z-index: 9999;">Soy un ninja oculto</div>
</div>
<div class="otro-elemento" style="z-index: 11;">
Yo estoy encima de todos
</div>
En este caso, aunque el .hijo tiene un z-index altísimo, al estar dentro de un padre con opacity, se crea un nuevo contexto. Como el .otro-elemento tiene un z-index: 11 (mayor al 10 del padre), ganará la batalla visual.
🚀 Aprende a dominar las capas
Si quieres ver ejemplos interactivos y profundizar en cómo el navegador renderiza estas capas paso a paso, he preparado una guía detallada en mi sitio.
👉 Lee el artículo completo aquí: Guía Maestra: Contexto de Apilamiento en CSS
¿Te ha pasado este dolor de cabeza con el z-index? Cuéntame en los comentarios cómo lo solucionaste. 👇
Top comments (0)