Z-index e empilhamento

No Laboratório Belavista, o cartaz da vitrine e o aviso de horário precisam se sobrepor. Quem fica na frente? O eixo Z decide.

O exemplo está em pacote de exemplos/41-z-index/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• O que é z-index e o eixo Z do navegador.
• Quando position precisa ser diferente de static.
• O que é um contexto de empilhamento.
• Por que um filho com z-index: 999 pode perder para um vizinho “menor”.

Ordem na pilha

Por padrão, o que vem depois no HTML fica por cima. z-index muda essa ordem no eixo que aponta para você.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Empilhamento — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <main class="palco">
      <div class="cartaz">Cartaz da semana</div>
      <div class="aviso">Horário: 14h–18h</div>
    </main>
  </body>
</html>

.palco {
  position: relative;
  height: 12rem;
  background: #f4f0e8;
}
.cartaz,
.aviso {
  position: absolute;
  padding: 1rem;
  width: 10rem;
}
.cartaz {
  top: 1rem;
  left: 1rem;
  background: #c45c26;
  color: #fff;
  z-index: 1;
}
.aviso {
  top: 3rem;
  left: 4rem;
  background: #1a3a4a;
  color: #fff;
  z-index: 2;
}

Mude uma coisa. Troque o z-index do aviso para 0. Preveja o cartaz na frente. Recarregue. Confira.

Position e Flex/Grid

No fluxo normal, z-index só “pega” se position não for static (por exemplo relative, absolute, fixed). Em itens de Flexbox ou Grid, z-index funciona sem exigir position extra.

Erro comum: colocar z-index: 999 em um elemento com position: static e achar que o CSS “não funciona”.

Contexto de empilhamento

Um contexto de empilhamento é um grupo: filhos competem entre si; o pai decide o lugar do grupo inteiro.

Se o pai tem position: relative e z-index: 0 (ou outro valor numérico), ele abre um contexto novo. O filho com z-index: -1 fica atrás do fundo do pai — não atrás de outro bloco fora desse contexto.

Outras propriedades também abrem contexto: opacity menor que 1, transform, filter, will-change, entre outras.

.vitrine {
  position: relative;
  z-index: 1;
  background: rgb(244 240 232 / 0.9);
}
.vitrine .etiqueta {
  position: relative;
  z-index: -1; /* atrás do fundo da vitrine, não da página toda */
}

Arquivo no disco é estilos.css. A janela mostra a pilha. Teste em 127.0.0.1. Nada disso é o site público do ateliê.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Sem z-index, qual bloco fica por cima: o primeiro ou o último no HTML?
2. Por que z-index em um div estático costuma falhar?
3. Um pai com z-index: 1 e um filho com 999: o filho pode passar por cima de um tio com z-index: 2?

Respostas comentadas

1. O último no documento, na ordem de empilhamento padrão.
2. Porque, fora de Flex/Grid, o elemento precisa de position diferente de static para o z-index criar ordem explícita.
3. Não. O filho compete só dentro do contexto do pai. O tio com 2 fica acima do grupo do pai com 1.