Todos hemos pasado por eso: escribir z-index: 99999; y casi golpear la pantalla porque un elemento no logra ponerse por encima de otro.
Si buscas un parche rápido, este texto no te dará una receta mágica; su objetivo es que entiendas por qué ese número aleatorio no funciona y cómo solucionarlo de raíz.
Antes de meternos en problemas reales, recuerda estas reglas claves. Si no defines z-index, su valor es auto. Para que z-index tenga efecto, el elemento debe tener position distinta de static. En contenedores flex y grid z-index puede aplicarse incluso sin definir position en el hijo. Cuando dos elementos compiten en el mismo contexto, el que aparece más abajo en el documento se pinta por encima.
La pieza central es el concepto de contextos de apilamiento. Ese es el motivo por el que tu 99999 no hace nada. Imagina dos padres, Ahmed y Mark, cada uno con dos hijos. No comparamos la edad de un hijo con la de un padre ni la de un hijo con la de un hijo de otra familia. Solo comparamos entre hermanos o entre padres.
Cuando un elemento padre tiene position relativa o similar y un z-index numérico, crea su propio contexto de apilamiento. Es como formar una familia. Sus hijos nunca podrán estar por encima del padre sin salir de esa familia. Da igual que Omar tenga z-index enorme; si Ahmed, su padre, tiene z-index 2, Omar no lo superará dentro de ese contexto.
Dentro de la misma familia sí se comparan hermanos. Si Omar tiene z-index mayor que Marwan, Omar se dibuja por encima de Marwan. Entre padres también se comparan: Ahmed frente a Mark. Pero no comparas a Mark con Omar directamente, sino a Mark con el padre de Omar, que es Ahmed.
Existe una excepción útil. Si el padre no crea contexto de apilamiento, por ejemplo cuando su position es static, el hijo se evalúa en el contexto raíz y puede aparecer por encima del padre. Incluso si el padre declara z-index sin posición válida, no surtirá efecto.
Cómo arreglarlo en la práctica. La solución típica es sacar el elemento del contexto que lo atrapa. En React y Vue esto se resuelve con patrones como Portal o Teleport para renderizar modales, menús y popovers directamente en body. Otras vías incluyen reestructurar el HTML y revisar qué ancestros crean contextos por z-index y position, o por propiedades como opacity menor que 1, transform, filter, will-change o mix-blend-mode, y ajustarlas con intención.
Resumen mental. Deja de lanzar nueves al azar. Pregunta quién crea el primer contexto, dónde está tu elemento en la jerarquía y con quién compite realmente. Una vez lo veas, z-index deja de ser magia negra y se vuelve predecible.
En Q2BSTUDIO construimos interfaces robustas y sistemas completos. Si tu proyecto requiere una base sólida de front end y back end, te ayudamos con aplicaciones a medida y software a medida que aplican buenas prácticas de CSS, accesibilidad y rendimiento, incluyendo patrones de superposición como modales, tooltips y overlays sin peleas de z-index.
También potenciamos productos con inteligencia artificial e IA para empresas, agentes IA y analítica avanzada. Ofrecemos ciberseguridad y pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, además de automatización de procesos para optimizar operaciones y acelerar el time to market.
¿Tienes un caso complejo de capas, menús, popovers o portales que conviven con transiciones y transforms? Hablemos y lo convertimos en una solución limpia, mantenible y escalable.