O Inspetor de Z-Index torna visível a ordem de empilhamento oculta da sua página. Ele identifica todos os elementos com valores de z-index, destaca contextos de empilhamento e ajuda você a entender por que os elementos aparecem acima ou abaixo uns dos outros, resolvendo conflitos de sobreposição complexos em segundos.
Depurar problemas de z-index é uma das tarefas mais frustrantes no desenvolvimento web. Um elemento com z-index: 9999 pode ser escondido atrás de um com z-index: 1 se eles estiverem em diferentes contextos de empilhamento. O Inspetor de Z-Index resolve isso visualizando toda a hierarquia de camadas. Ele escaneia a página e cria um mapa de camadas, destacando elementos com z-index usando sobreposições coloridas e rótulos claros. Mais importante ainda, ele identifica elementos que criam novos contextos de empilhamento (devido a propriedades como position, opacity, transform ou filter), permitindo que você veja exatamente onde a hierarquia de z-index é redefinida. O painel lateral lista todos os elementos relevantes ordenados por sua ordem de renderização visual, facilitando o rastreamento da cadeia de contextos de pais até a raiz.
Elementos com valores de z-index recebem sobreposições coloridas diretamente na página. Cores quentes indicam valores mais altos, enquanto cores frias indicam valores mais baixos, tornando a ordem de empilhamento visualmente óbvia.
Identifica automaticamente elementos que criam novos contextos de empilhamento. Veja qual propriedade CSS (opacity, transform, mix-blend-mode, etc.) é responsável por criar o limite de contexto.
Uma lista abrangente de todos os elementos com z-index, ordenada do mais alto para o mais baixo. Cada entrada mostra o seletor do elemento, o valor do z-index e sua propriedade de posição.
Clique em qualquer elemento na lista do mapa de camadas para destacá-lo instantaneamente na página. O inspetor rola até o elemento e mostra suas propriedades de empilhamento detalhadas.
Cada entrada de camada mostra o valor da posição CSS (static, relative, absolute, fixed, sticky), já que o z-index só se aplica a elementos posicionados. Identifique casos onde o z-index está definido mas a posição é estática.
Para qualquer elemento selecionado, veja a cadeia completa de contextos de empilhamento ancestrais até a raiz. Entenda exatamente qual contexto de ancestral está limitando o escopo do z-index do elemento.
Um modal com z-index: 9999 está escondido atrás de uma barra lateral com z-index: 10. Como? O Inspetor de Z-Index mostra que o pai do modal tem position: relative e cria um contexto de empilhamento com z-index: 1, enquanto o pai da barra lateral tem z-index: 2. O modal nunca pode escapar do contexto de seu pai.
Um menu dropdown desaparece atrás da próxima seção quando abre. O inspetor revela que o contêiner do menu tem overflow: hidden (que também cria um contexto de empilhamento) ou que a próxima seção tem um z-index maior. O destaque visual das camadas torna a sobreposição óbvia.
Com o tempo, os valores de z-index se acumulam: 10, 100, 999, 9999, 99999. O mapa de camadas mostra todos os valores ordenados, facilitando a identificação da faixa real necessária e a simplificação para uma escala limpa (1, 2, 3, 10, 100).
Widgets de chat, banners de cookies e overlays de análise injetam elementos com altos valores de z-index. O Inspetor de Z-Index mostra exatamente quais valores eles usam, ajudando você a definir seus próprios valores de z-index apropriadamente para evitar conflitos.
Revise todos os contextos de empilhamento na página para verificar se há algum desnecessário. Transforms, filtros e opacidade aplicados para efeitos visuais podem inadvertidamente criar contextos de empilhamento que causam problemas de z-index em outros lugares. A lista de contextos torna todos eles visíveis.
Abra o dock flutuante do DevSuite Pro e clique no ícone Inspetor de Z-Index. A ferramenta escaneia a página e identifica cada elemento com um valor de z-index e cada limite de contexto de empilhamento.
Elementos com valores de z-index recebem sobreposições coloridas diretamente na página, com rótulos mostrando seus números de z-index. Valores mais altos aparecem com cores quentes, valores mais baixos com cores frias.
Abra o painel lateral para ver todas as camadas de z-index ordenadas do mais alto para o mais baixo. Cada entrada mostra o valor, seletor e propriedade de posição. Clique em qualquer entrada para destacar o elemento na página.
A seção "Contextos de Empilhamento" do painel lista cada elemento que cria um novo contexto de empilhamento e a propriedade CSS responsável. Esta é geralmente a chave para entender problemas de z-index.
Clique em qualquer elemento para ver sua cadeia de contexto de empilhamento ancestral — quais contextos pais afetam sua ordem de renderização. Siga a cadeia para cima para encontrar o limite de contexto que está causando o problema.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
