Z-Index e Contexto de Empilhamento
Controle quais elementos aparecem por cima usando z-index e compreenda os contextos de empilhamento.
Z-Index e Contexto de Empilhamento é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é z-index?
z-index controla a ordem de empilhamento dos elementos posicionados ao longo do eixo Z (da frente para trás). Quando os elementos se sobrepõem, valores maiores aparecem sobre valores menores.
z-index só funciona em elementos posicionados
z-index não tem efeito sobre elementos com position: static (o padrão). É necessário usar relative, absolute, fixed ou sticky para que o z-index seja aplicado.
<div class="popup">Popup (position + z-index)</div>
Ordem de empilhamento padrão
Sem um z-index explícito, os elementos são empilhados nesta ordem (da parte de trás para a frente):
- Plano de fundo do elemento raiz
- Elementos em nível de bloco (na ordem do fluxo)
- Elementos flutuantes
- Elementos em linha
- Elementos posicionados com z-index: auto ou 0
Contexto de empilhamento
Um contexto de empilhamento é uma camada de elementos com um eixo z compartilhado. Os valores de z-index só competem dentro do mesmo contexto de empilhamento. Um elemento dentro de um contexto de empilhamento não pode ser colocado acima de elementos externos a ele, independentemente do valor de z-index.
O que cria um contexto de empilhamento?
Um novo contexto de empilhamento é criado por:
position+z-indexdiferente de autoopacityinferior a 1transform,filterouperspectiveaplicadoswill-changeem propriedades específicasisolation: isolate- Filhos de flexbox ou grade com z-index
Isolamento do contexto de empilhamento
Use isolation: isolate para criar intencionalmente um contexto de empilhamento, sem efeitos visuais colaterais. Isso é útil para componentes de interface que precisam conter suas próprias camadas de z-index.
<div class="modal-wrapper">Isolated stacking context</div>
O problema da escala de z-index
Os projetos frequentemente sofrem com "guerras de z-index", nas quais os desenvolvedores competem aumentando os valores para 9999 ou 99999. Resolva isso usando uma escala de z-index nomeada com variáveis do CSS:
<p>Custom properties define a z-index scale used across the app.</p>
z-index negativo
Valores negativos de z-index colocam os elementos atrás do plano de fundo do bloco contêiner. Isso pode ser usado para camadas de pseudoelementos decorativos posicionadas atrás do conteúdo.
<div class="card">Card with a decorative gradient layer behind it</div>
Depuração de problemas de empilhamento
Quando um modal ou uma dica de ferramenta aparece atrás de outro elemento, o culpado geralmente é um contexto de empilhamento em um elemento ancestral com z-index baixo. Use a Visualização 3D do DevTools ou verifique a opacidade, a transformação e o filtro nos elementos-pai.
z-index em flexbox e grade
Itens de flexbox e de grade podem usar z-index diretamente, sem definir position explicitamente. O navegador os trata como posicionados para fins de empilhamento.
<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>
Modais fixos e z-index
Os modais devem ser filhos diretos de <body> (ou de um contêiner de nível superior) para escapar dos contextos de empilhamento ancestrais. O elemento HTML <dialog> faz isso nativamente na camada superior do navegador.
Verificação rápida
Dois elementos sobrepostos têm z-index: 100 em contextos de empilhamento de elementos-pai diferentes. O que determina qual deles aparece por cima?
Recapitulação
z-index controla o empilhamento da frente para trás de elementos posicionados. Os contextos de empilhamento isolam a competição entre valores de z-index. Qualquer elemento que crie um contexto de empilhamento em um elemento-pai pode prender os valores de z-index dos filhos. Use isolation: isolate para criar limites explícitos e variáveis do CSS para uma escala de z-index.
Perguntas Frequentes
A aula “Z-Index e Contexto de Empilhamento” é grátis?
Sim — o texto completo de “Z-Index e Contexto de Empilhamento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Z-Index e Contexto de Empilhamento”?
Controle quais elementos aparecem por cima usando z-index e compreenda os contextos de empilhamento. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Z-Index e Contexto de Empilhamento”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Posicionamento Estático e Relativo
- Posicionamento Absoluto e Bloco Contenedor
- Posicionamento Fixo e Adesivo
- Z-Index e Contexto de Empilhamento