El Inspector de Z-Index revela el orden de apilamiento completo de cada elemento en una página web. Cada elemento con un valor z-index se resalta y etiqueta directamente en la página, y un panel de mapa de capas ordenado muestra todas las capas z-index desde abajo hacia arriba. Identifica contextos de apilamiento creados por position, transform, opacity y otras propiedades CSS — finalmente haciendo que la depuración de z-index sea visual e intuitiva.
Los errores de z-index son algunos de los problemas más frustrantes en CSS. Un modal que debería aparecer sobre todo está oculto detrás de una barra lateral. Un menú desplegable desaparece detrás de la siguiente sección. Un tooltip es invisible porque un elemento padre crea un contexto de apilamiento inesperado. La causa raíz casi siempre es un malentendido sobre cómo funcionan los contextos de apilamiento — y los DevTools del navegador te dan casi ninguna ayuda para visualizarlos. El Inspector de Z-Index hace visible lo invisible. Cada elemento con un z-index explícito obtiene una superposición de color y una etiqueta mostrando su valor. Un panel de mapa de capas ordenado lista todos los valores z-index desde abajo (el más bajo) hasta arriba (el más alto), mostrando a qué clase CSS o elemento pertenece cada valor. Lo más importante, la herramienta identifica los límites de contexto de apilamiento — elementos que crean nuevos contextos de apilamiento a través de position + z-index, transform, opacity < 1, filter, will-change o isolation. Entender qué ancestro crea el contexto de apilamiento es generalmente la clave para corregir errores de z-index.
Cada elemento con un valor z-index obtiene una superposición de color semitransparente y un distintivo de etiqueta mostrando su número z-index. Los valores z-index más altos obtienen colores más cálidos (rojos), los valores más bajos obtienen colores más fríos (azules). La estratificación visual hace que el orden de apilamiento sea inmediatamente intuitivo.
Un panel lateral lista todos los valores z-index encontrados en la página, ordenados de más alto (arriba) a más bajo (abajo). Cada entrada muestra el valor z-index, el selector CSS o nombre de clase, y la propiedad position. Haz clic en cualquier entrada para resaltar el elemento correspondiente en la página.
Identifica cada límite de contexto de apilamiento en la página y la propiedad CSS que lo crea — position: relative/absolute con z-index, transform, opacity < 1, filter, will-change, isolation: isolate, o contain: layout. Estos se listan por separado para que puedas rastrear por qué un valor z-index no se está comportando como se esperaba.
Haz clic en cualquier capa del panel para resaltar y desplazarte al elemento correspondiente en la página. O haz clic en cualquier elemento resaltado en la página para localizarlo en el panel del mapa de capas. Navega el orden de apilamiento en la dirección que sea natural.
Cada entrada de capa muestra el valor CSS position del elemento (static, relative, absolute, fixed, sticky) ya que z-index solo se aplica a elementos posicionados. Detecta casos donde z-index está establecido pero position es static — un error común donde z-index no tiene efecto.
Para cualquier elemento seleccionado, ve la cadena completa de contextos de apilamiento ancestros hasta la raíz. Entiende exactamente qué contexto de apilamiento de ancestro está limitando el alcance del z-index del elemento — la información clave para la mayoría de la depuración de z-index.
Un modal con z-index: 9999 está oculto detrás de una barra lateral con z-index: 10. ¿Cómo? El Inspector de Z-Index muestra que el padre del modal tiene position: relative y crea un contexto de apilamiento con z-index: 1, mientras que el padre de la barra lateral tiene z-index: 2. El modal nunca puede escapar del contexto de su padre.
Un menú desplegable desaparece detrás de la siguiente sección cuando se abre. El inspector revela que el contenedor del menú tiene overflow: hidden (que también crea un contexto de apilamiento) o que la siguiente sección tiene un z-index más alto. El resaltado visual de capas hace que la superposición sea obvia.
Con el tiempo, los valores z-index se acumulan: 10, 100, 999, 9999, 99999. El mapa de capas muestra todos los valores ordenados, facilitando identificar el rango real necesario y simplificar a una escala limpia (1, 2, 3, 10, 100).
Los widgets de chat, banners de cookies y superposiciones de analítica inyectan elementos con altos valores z-index. El Inspector de Z-Index muestra exactamente qué valores usan, ayudándote a establecer tus propios valores z-index apropiadamente para evitar conflictos.
Revisa todos los contextos de apilamiento en la página para verificar los innecesarios. Transformaciones, filtros y opacidad aplicados para efectos visuales pueden crear inadvertidamente contextos de apilamiento que causan problemas de z-index en otros lugares. La lista de contextos los hace a todos visibles.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Inspector de Z-Index. La herramienta escanea la página e identifica cada elemento con un valor z-index y cada límite de contexto de apilamiento.
Los elementos con valores z-index obtienen superposiciones de color directamente en la página, con etiquetas mostrando sus números z-index. Los valores más altos aparecen con colores más cálidos, los valores más bajos con colores más fríos.
Abre el panel lateral para ver todas las capas z-index ordenadas de más alto a más bajo. Cada entrada muestra el valor, selector y propiedad position. Haz clic en cualquier entrada para resaltar el elemento en la página.
La sección "Contextos de Apilamiento" del panel lista cada elemento que crea un nuevo contexto de apilamiento y la propiedad CSS responsable. Esto es generalmente la clave para entender los problemas de z-index.
Haz clic en cualquier elemento para ver su cadena de contextos de apilamiento ancestros — qué contextos padre afectan su orden de renderizado. Sigue la cadena hacia arriba para encontrar el límite de contexto que está causando el problema de apilamiento.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
