Propriedade Z-Index
Última atualização: 2026-09-13
z-index Propriedade Z-Index
A propriedade z-index controla a ordem de empilhamento de elementos posicionados ao longo do eixo z, perpendicular à tela; elementos com valor maior são renderizados acima dos que têm valores menores. É tipicamente usada com position para interfaces em camadas, como modais, menus suspensos e sobreposições.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | elementos posicionados |
| Tipo de Animação | integer |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
z-index: auto | <integer>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Não cria um novo contexto de empilhamento. |
<integer> | Tipo | Uma ordem de empilhamento inteira; valores maiores são renderizados no topo. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| z-index | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： O z-index afeta apenas elementos com position diferente de static; defini-lo em elementos em fluxo normal não tem efeito.
Importante： As comparações de z-index só funcionam dentro do mesmo contexto de empilhamento. Valores em contextos de empilhamento diferentes não podem ser comparados diretamente, e o z-index de um filho não pode ultrapassar o limite do contexto de empilhamento do pai.
❓ Perguntas Frequentes
QQual valor de z-index devo usar?
APara a maioria dos casos de negócio, de 1 a 10 cobre quase tudo; projetos maiores usam números redondos ou milhares, com modais em 9999 e sobreposições em 1000. Evite abusar de valores extremos como 999999: quando vários componentes competem aumentando o z-index, os números saem do controle e ficam impossíveis de manter. É melhor manter o z-index em uma faixa pequena e gerenciar os níveis com variáveis ou convenções.
QPor que o z-index não está funcionando?
ACausas comuns: primeiro, o elemento não tem position, já que o z-index afeta apenas elementos posicionados e itens flex ou grid; segundo, um pai cria um contexto de empilhamento, via opacity abaixo de 1, transform, filter e assim por diante, confinando o z-index do filho a ele; terceiro, os dois elementos não estão no mesmo contexto de empilhamento nem compartilham um pai comum, então não podem ser comparados. Depure essas três na ordem.
QO que é um contexto de empilhamento?
AUm contexto de empilhamento é uma zona isolada de empilhamento: a ordenação por z-index só vale dentro dessa zona. Ele é criado por elementos posicionados com z-index diferente de auto, opacity abaixo de 1, transform, filter e várias outras propriedades. O z-index de um filho nunca pode escapar do limite do contexto de empilhamento do pai, e é exatamente por isso que um modal frequentemente falha em cobrir um backdrop. O conserto geralmente é mover o elemento sobreposto para fora desse contexto.
QO z-index só funciona em elementos posicionados?
ATradicionalmente sim, o z-index se aplica a elementos posicionados, ou seja, relative, absolute, fixed ou sticky. No entanto, em layouts flex e grid, os itens podem usar z-index para controlar a ordem visual mesmo sem estarem posicionados. Elementos em fluxo normal que não estão posicionados não podem ser reordenados com z-index, então, se precisar sobrepor elementos comuns, adicione position:relative primeiro, o que não custa nada em termos de layout e libera o z-index.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade position
Conheça os pré-requisitos para o z-index ter efeito.
Contexto de Empilhamento
Entenda o escopo no qual o z-index funciona.
