Visualizador de Empilhamento Z-Index
Visualize contextos de empilhamento CSS z-index com um construtor de camadas interativo. Adicione, reordene e configure camadas com nomes, valores z-index e definições de contexto de empilhamento. Veja a ordem de renderização numa pré-visualização visual em tempo real, detete problemas comuns como z-indices duplicados e copie o CSS gerado. Totalmente privado, 100 % grátis e sem registo.
Layers (5)
Stacking Order
Porquê usar o nosso visualizador de empilhamento z-index?
- Pré-visualização visual de contextos de empilhamento: Veja exatamente como as suas camadas se empilham com uma pré-visualização visual em tempo real. Cada camada é exibida com o seu z-index real, mostrando que elementos aparecem à frente. A pré-visualização atualiza-se automaticamente ao adicionar, remover ou reordenar camadas.
- Avisos inteligentes e boas práticas: O visualizador de z-index deteta automaticamente problemas comuns: valores z-index duplicados, valores extremamente altos (9999+) e contextos de empilhamento em falta. Cada aviso inclui uma explicação clara do problema e como o corrigir.
- 100 % privado - Sem envios: Toda a visualização de contextos de empilhamento acontece localmente no seu navegador. As suas configurações de camadas nunca saem do seu dispositivo e nunca são enviadas para nenhum servidor.
- Grátis e sem limites: Crie configurações de empilhamento z-index ilimitadas sem registo, sem subscrição e sem limites de utilização. O visualizador de empilhamento z-index é completamente grátis para sempre, sem anúncios a bloquear a interface.
Casos de uso comuns do visualizador de empilhamento z-index
- Depuração de problemas de empilhamento: Os programadores frontend usam o visualizador de empilhamento z-index para depurar elementos que aparecem pela ordem errada. Adicione as suas camadas com os respetivos valores z-index e veja instantaneamente a pilha de renderização — identifique conflitos e corrija-os sem tentativa e erro no DevTools.
- Planeamento de modais e sobreposições: Os designers de UI usam o visualizador de empilhamento z-index para planear a arquitetura de z-index de diálogos modais. Planeie em conjunto as camadas de sobreposição, conteúdo modal e fundo, garantindo que os modais aparecem acima da navegação mas abaixo dos alertas críticos.
- Arquitetura de design systems: As equipas de design system usam o visualizador de z-index para definir e documentar escalas de z-index para a sua biblioteca de componentes. Estabeleça níveis de z-index claros para navegação, sobreposições, tooltips, modais e notificações — garantindo consistência em todos os componentes.
- Layouts sticky e fixed: Os designers de layouts usam o visualizador de empilhamento z-index para planear cabeçalhos sticky, barras laterais fixas e botões de ação flutuantes. Estes elementos posicionados criam novos contextos de empilhamento que exigem uma gestão cuidadosa do z-index para empilhar corretamente.
- Sistemas de menus suspensos e tooltips: Os designers usam o visualizador de z-index para planear menus suspensos aninhados e sistemas de tooltips que devem aparecer acima de todo o conteúdo da página sem quebrar os contextos de empilhamento. Compreenda como cada nível de menu suspenso cria um novo contexto de empilhamento.
- Revisão de código e documentação: Os líderes de equipa e programadores seniores usam o visualizador de empilhamento z-index durante revisões de código para explicar problemas de contextos de empilhamento e documentar arquiteturas de z-index recomendadas. Partilhe diagramas visuais de empilhamento em descrições de PR e documentação.
O que é o z-index?
Z-index é uma propriedade CSS que controla a ordem de empilhamento dos elementos posicionados ao longo do eixo z (o eixo que sai do ecrã na sua direção). Elementos com um z-index mais alto aparecem à frente de elementos com um z-index mais baixo. O z-index só funciona em elementos posicionados — aqueles com position: relative, absolute, fixed ou sticky. O nosso visualizador de empilhamento z-index ajuda-o a compreender e gerir estas relações visualmente.
Como funciona o nosso visualizador de empilhamento z-index
- Adicione e configure camadas: Cada camada representa um elemento posicionado com um nome, valor z-index, cor e definição de contexto de empilhamento. Adicione novas camadas, reordene-as ou carregue uma das predefinições para começar.
- Veja a pilha visual: A área de pré-visualização mostra todas as camadas como caixas sobrepostas com os seus valores z-index. As camadas com valores z-index mais altos aparecem à frente. Ative o comutador de contexto de empilhamento para marcar as camadas que criam novos contextos de empilhamento.
- Reveja os avisos e exporte o CSS: A ferramenta deteta automaticamente problemas potenciais como z-indices duplicados ou contextos de empilhamento em falta. Copie o CSS gerado para as suas camadas com um clique.
O que cria um novo contexto de empilhamento?
- Elemento raiz - o próprio elemento HTML cria o contexto de empilhamento raiz.
- Elementos posicionados com z-index - qualquer elemento com position: relative, absolute, fixed ou sticky E um valor z-index diferente de auto.
- Opacidade inferior a 1 - elementos com opacity < 1 criam um novo contexto de empilhamento (usado para isolar a renderização).
- Transformações CSS - qualquer elemento com um transform diferente de none cria um novo contexto de empilhamento.
- Filtros CSS - elementos com filter ou backdrop-filter criam novos contextos de empilhamento.
- will-change - a propriedade will-change pode criar contextos de empilhamento.
- contain - contain: layout ou contain: paint criam contextos de empilhamento.
Porque é que os contextos de empilhamento são importantes
Os contextos de empilhamento são um dos conceitos CSS mais frequentemente mal compreendidos. Quando um elemento cria um novo contexto de empilhamento, os valores z-index dos seus filhos ficam confinados a esse contexto — só se podem sobrepor a outros elementos dentro do mesmo contexto. É por isso que um filho com z-index 9999 pode ainda aparecer atrás do irmão do seu pai se o pai tiver um z-index mais baixo no contexto raiz. O visualizador de empilhamento z-index torna esta relação clara mostrando que camadas criam novos contextos e como os valores z-index se relacionam em toda a hierarquia de empilhamento.
Perguntas frequentes
Um contexto de empilhamento é um grupo de elementos que partilham o mesmo pai e se empilham em conjunto. Os elementos dentro de um contexto de empilhamento empilham-se entre si de forma relativa, e todo o contexto empilha-se de forma relativa aos contextos irmãos. Isto significa que um elemento filho com z-index 9999 dentro de um pai com z-index 1 ainda aparecerá atrás de um irmão desse pai com z-index 2. Os contextos de empilhamento são criados por elementos posicionados com z-index, opacidade inferior a 1, transforms, filters e várias outras propriedades CSS.
Se z-index: 9999 não coloca o seu elemento à frente, provavelmente está preso dentro de um contexto de empilhamento. Verifique se algum elemento ancestral cria um contexto de empilhamento (tem position + z-index, opacity < 1, transform, filter ou will-change). O z-index do seu elemento só se aplica dentro do contexto de empilhamento desse ancestral. Para corrigir, mova o elemento para fora desse ancestral no DOM ou aumente o z-index do ancestral.
Z-index é a propriedade que define onde um elemento aparece ao longo do eixo z (da frente para trás). Um contexto de empilhamento é o âmbito dentro do qual os valores z-index são comparados. Pense nos contextos de empilhamento como pisos de um edifício: cada piso (contexto de empilhamento) tem a sua própria ordenação, e os pisos empilham-se entre si. Sem compreender os contextos de empilhamento, os valores z-index podem parecer imprevisíveis — é exatamente isso que o visualizador de empilhamento z-index o ajuda a compreender.
Sim. Em CSS, a propriedade z-index só funciona em elementos posicionados (position: relative, absolute, fixed ou sticky). Se definir z-index num elemento estático (predefinido), será ignorado. A única exceção é para itens de Grid e Flexbox, onde o z-index pode funcionar sem posicionamento explícito. O visualizador de empilhamento z-index assume que todas as camadas estão posicionadas.
Uma escala de z-index recomendada mantém os valores espaçados para permitir adições futuras. Uma abordagem comum: 0-9 para camadas de conteúdo, 10-19 para cabeçalhos e navegação, 20-29 para elementos sticky, 100-199 para menus suspensos e tooltips, 200-299 para sobreposições e fundos, 300-399 para modais, e 400+ para notificações e toasts críticos. Usar incrementos de 10 ou 100 entre níveis deixa espaço para valores intermédios.
Sim. O visualizador de empilhamento z-index é 100 % grátis, sem registo, sem funcionalidades premium e sem limites de utilização. Crie configurações de empilhamento ilimitadas sem restrições nem custos ocultos.
Sim. O visualizador de empilhamento z-index é uma excelente ferramenta didática. A pré-visualização visual com camadas sobrepostas facilita demonstrar como funcionam o z-index e os contextos de empilhamento. Os avisos automáticos ajudam os estudantes a compreender erros comuns, e a tabela de ordem de empilhamento fornece uma listagem numerada e clara da ordem de renderização de baixo para cima.
O contexto de empilhamento raiz é o contexto predefinido criado pelo próprio elemento HTML. Todos os elementos que não criam o seu próprio contexto de empilhamento existem dentro do contexto raiz ou de um contexto descendente. O contexto raiz está sempre na base da hierarquia de empilhamento. O visualizador de empilhamento z-index inclui o contexto raiz como primeira camada por predefinição, representando o fundo da página.