Para que serve a propriedade z-index no CSS?

A propriedade z-index em CSS controla a ordem de empilhamento de elementos posicionados ao longo do eixo Z. Elementos com um valor maior de z-index são colocados acima de elementos com um valor menor.

Pontos-chave:

• Aplica-se apenas a elementos posicionados (position: relative, absolute, fixed, sticky).
• O valor pode ser um número (positivo, negativo ou zero).
• O valor automático (auto) corresponde à ordem na árvore DOM.
• Valores negativos de z-index podem colocar um elemento por baixo do elemento pai e seu conteúdo.
• z-index cria um contexto de empilhamento (stacking context). Os elementos dentro de um mesmo contexto são ordenados pelo seu z-index, mas todo o contexto se comporta como uma unidade em relação a outros contextos.

Ordem de empilhamento padrão (sem z-index):

1. Fundo e bordas do elemento raiz.
2. Elementos posicionados com z-index negativo.
3. Elementos de bloco em fluxo normal.
4. Elementos flutuantes (float).
5. Elementos em linha em fluxo normal.
6. Elementos posicionados com z-index: auto ou z-index: 0.
7. Elementos posicionados com z-index positivo.

Exemplo:

/* style.css */
.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
  top: 10px;
  left: 10px;
  z-index: 1; /* Estará acima do azul */
}

.blue {
  background-color: blue;
  top: 30px;
  left: 30px;
  z-index: 0; /* Estará abaixo do vermelho */
}

<!-- index.html -->
<div class="box red"></div>
<div class="box blue"></div>

Neste caso, o bloco vermelho (z-index: 1) estará acima do bloco azul (z-index: 0).