Propriedade Z-index §

---

A propriedade z-index é utilizada para controlar a sobreposição de elementos posicionados em um layout. Ela afeta a profundidade dos elementos na pilha de sobreposição, determinando qual elemento será exibido acima de outros.

Valor da propriedade z-index §

• Auto: Valor padrão. A ordem de empilhamento é determinada pelo posicionamento e ordem de aparecimento no código.
• Número inteiro: Define a ordem de empilhamento. Quanto maior o número, mais acima o elemento será exibido.

Exemplos §

Sobreposição de elementos §

.div1 {
  z-index: 2;
}
 
.div2 {
  z-index: 1;
}

Neste exemplo, div1 será exibida acima de div2 devido ao z-index maior.

Sobreposição em um layout com posicionamento §

.header {
  position: relative;
  z-index: 1;
}
 
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

Aqui, o cabeçalho (header) tem um z-index menor que o modal, garantindo que o modal seja exibido acima do cabeçalho.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado