z-index e contextos de empilhamento

O eixo que não se vê

Além de largura e altura, as caixas vivem em um terceiro eixo: o eixo Z, que vai da tela em direção a você. É a profundidade. Quando dois elementos se sobrepõem, z-index decide qual fica na frente: quanto maior o número, mais perto de você. Pense em um baralho de cartas sobre a mesa: a de cima cobre as de baixo.

.atras  { position: absolute; z-index: 1; }
.frente { position: absolute; z-index: 2; }  /* cobre .atras */

z-index só funciona com position

z-index só tem efeito em elementos posicionados (ou seja, com um position diferente de static: relative, absolute, fixed ou sticky). Em um elemento static ele é completamente ignorado.

⚠️ PEGADINHA CLÁSSICA: colocar z-index e esquecer o position. Você sobe o número para 9999, nada acontece, e começa a duvidar da própria sanidade. Antes de mexer no z-index, garanta que o elemento esteja posicionado.

.modal {
  position: fixed;   /* sem isso, o z-index não faria nada */
  z-index: 100;
}

Contextos de empilhamento (introdução)

Um contexto de empilhamento é uma "bolha" Z independente. Dentro dela, os valores de z-index dos filhos só competem entre si, não com elementos de fora. Um elemento cria um novo contexto quando, por exemplo:

• tem position posicionado e um z-index numérico, ou
• tem opacity menor que 1, uma transform, um filter, etc.

A consequência prática: um filho com z-index: 9999 nunca vai superar um elemento de outra bolha cujo pai tenha um z-index maior. Se um modal "se esconde" atrás de algo apesar do seu z-index enorme, a causa é quase sempre um contexto de empilhamento criado por um ancestral.

Ideia-chave: a ordem Z é resolvida por níveis, primeiro entre bolhas e depois dentro de cada uma. Mantenha poucos contextos e números baixos e ordenados; o seu eu do futuro vai agradecer.

Com isso você fecha o bloco de posicionamento clássico. O próximo passo é o flexbox, onde você para de empurrar caixas uma a uma e diz ao contêiner para distribuí-las por você.

Exemplos

O círculo vermelho fica na frente por causa do seu z-index maior

<style>
.zona { position: relative; height: 80px; }
.circulo {
  position: absolute;
  top: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.azul     { left: 10px; background: #3b82f6; z-index: 1; }
.vermelho { left: 35px; background: #ef4444; z-index: 2; }
</style>
<div class="zona">
  <div class="circulo azul"></div>
  <div class="circulo vermelho"></div>
</div>