O que é o z-index e como é utilizado no desenvolvimento web?

z-index — é uma propriedade CSS que determina a ordem de empilhamento (stacking) dos elementos com base na sua posição no eixo Z. Elementos com valores maiores de z-index aparecem acima de elementos com valores menores.

É usado para gerir a profundidade de empilhamento de elementos com posicionamento (ou seja, elementos cujo valor da propriedade position é diferente de static): relative, absolute, fixed, sticky.

Pontos principais de uso:

• Elementos com posicionamento estático (position: static;) não participam no contexto de empilhamento e ignoram z-index.
• O valor de z-index aplica-se apenas a elementos que criam um novo contexto de empilhamento. Este contexto é criado, por exemplo, ao usar position com valores diferentes de static, ou ao aplicar outras regras CSS (como opacity < 1).
• Dentro de um mesmo contexto de empilhamento, elementos com maior z-index ficam acima.
• Os contextos de empilhamento aninhados empilham-se como uma única unidade dentro do contexto pai.
• Sem uma atribuição explícita de z-index, a ordem de empilhamento é determinada pela ordem dos elementos no DOM.

Exemplo de uso:

.box1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2; /* Estará acima de .box2 */
}

.box2 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1; /* Estará abaixo de .box1 */
}