Carregando...

Z-index em CSS

A lição de Position colocou as caixas. z-index responde à pergunta seguinte: quando duas caixas se sobrepõem, qual fica mais perto do leitor? Pense em folhas de papel numa secretária — as de cima cobrem as de baixo. Aprenda as regras do dia a dia antes de inventar números enormes.

Um kit de ferramentas z-index

📊 Z-index em resumo

Ideia Trabalho quotidiano
z-index Define a ordem de pintura entre irmãos sobrepostos no mesmo stacking context
Primeiro posicionado Costuma precisar de position diferente de static (ou certos filhos de layout moderno)
O maior ganha Inteiros maiores pintam-se depois — aparecem por cima
auto Predefinição — seguir a ordem do documento e as regras do contexto pai
Stacking context Uma «gaiola» — os filhos comparam-se entre si, não com a página inteira
Escala calma Prefira passos pequenos (1, 2, 10) e papéis nomeados em vez de corridas a 9999

z-index não move uma caixa para a esquerda nem para a direita. Só muda quem cobre quem quando as caixas já partilham o mesmo espaço no ecrã.

Levante um distintivo acima do cartão

Dê ao cartão um lar posicionado e depois eleve o distintivo com um z-index modesto. A ordem dos irmãos pode bastar, mas uma camada explícita torna a intenção legível.

Distintivo sobre o cartão

css 
.card {
position: relative;
}

.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}

Overlay acima da página

Modais e gavetas costumam ficar acima do conteúdo comum. Emparelhe um overlay posicionado com um número de camada claro — e mantenha o conteúdo da página mais baixo de propósito.

Modal acima da página

css 
.page {
position: relative;
z-index: 1;
}

.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}

Compare irmãos, não o mundo inteiro

Entre irmãos num contexto, ganha o z-index mais alto. Em empate, irmãos posteriores no DOM costumam pintar-se por cima. Comece as comparações dentro de um pai antes de perseguir guerras à escala da página.

Cartões irmãos empilhados

css 
.stack {
position: relative;
}

.stack .card-a {
position: absolute;
z-index: 1;
}

.stack .card-b {
position: absolute;
z-index: 2;
}

Stacking contexts enjaulam filhos

Um pai com o seu próprio stacking context (por exemplo posicionado + z-index) pode prender os filhos. Um filho com z-index: 999 não salta por cima de um irmão fora desse pai se o próprio pai estiver mais baixo. Corrija a camada do pai — não inflacione só o filho.

Gaiola de contexto

css 
.panel {
position: relative;
z-index: 1;
}

.panel .popup {
position: absolute;
z-index: 999;
}

.toast {
position: fixed;
z-index: 5;
}

Um hábito z-index calmo

Nomeie papéis (--layer-badge, --layer-modal) ou use uma escala pequena. Evite 99999 salvo ao depurar. Lembre-se: colocação é position; empilhamento é z-index; o clear de float espera nas próximas lições.

Papéis de camada nomeados

css 
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}

.badge {
position: absolute;
z-index: var(--layer-badge);
}

.modal {
position: fixed;
z-index: var(--layer-modal);
}

Experimente você mesmo

  1. Coloque um distintivo absolute num cartão relative e defina z-index: 2.
  2. Construa um fundo/modal fixed com z-index: 10 acima do conteúdo da página em 1.
  3. Dê a dois irmãos absolute sobrepostos valores z-index diferentes e troque-os.
  4. Aninhe um filho com z-index alto dentro de um pai com z-index baixo — observe a gaiola.
  5. Reescreva um «9999» numa escala de custom properties nomeada.

Erros comuns

  • Esperar que z-index numa caixa static simples reordene tudo
  • Combater stacking contexts apenas elevando o filho aninhado
  • Correr com 99999 em vez de uma escala legível
  • Tratar esta lição como Position (colocação) ou Display (tipo de caixa)
  • Usar z-index para inventar colunas de página em vez de ferramentas de layout

Resumo

  • z-index controla quem pinta por cima quando as caixas se sobrepõem
  • Costuma precisar de position não static (ou casos especiais de layout)
  • Valores mais altos ganham dentro do mesmo stacking context
  • Contextos pai podem enjaular filhos — corrija o nível certo
  • Prefira escalas pequenas nomeadas; deixe float para as próximas lições

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 38 de 48
Css Tutorial