A propriedade z-index no CSS é usada para controlar a ordem de empilhamento vertical de elementos posicionados que se sobrepõem na página. Quando múltiplos elementos estão empilhados uns sobre os outros, o valor de z-index determina qual elemento aparece no topo. Quanto maior o valor de z-index, mais próximo o elemento estará do visualizador, enquanto valores menores colocam o elemento mais para trás na pilha. No entanto, o z-index funciona apenas em elementos que estão posicionados, o que significa que o elemento deve ter um valor de posição diferente de static, como relative, absolute ou fixed. O valor padrão de z-index é auto, que posiciona o elemento na ordem de empilhamento padrão. Vamos dar uma olhada em um exemplo com três caixas:

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

Agora, podemos aplicar alguns estilos para posicionar as caixas de forma que se sobreponham umas às outras assim:

<link rel="stylesheet" href="styles.css">
<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box1 {
  position: absolute;
  z-index: 1;
  background: lightcoral;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
}

.box2 {
  position: absolute;
  z-index: 3;
  background: gold;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
}

.box3 {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  top: 60px;
  left: 60px;
  width: 100px;
  height: 100px;
}

Para o container, o posicionamento será definido como relative e todas as caixas aninhadas dentro dele terão o posicionamento definido como absolute. Cada caixa tem um valor diferente para o z-index que resulta nas caixas sendo sobrepostas umas às outras. Você pode pensar em z-index como uma forma de criar camadas em uma página da web e elementos com valores de z-index mais altos serão colocados acima daqueles com valores mais baixos. Isso é especialmente útil para controlar como elementos sobrepostos se comportam em layouts complexos, como modais, pop-ups ou tooltips.