A Z-index é um recurso de CSS que permite controlar a ordem de sobreposição de elementos na tela. É usado para definir qual elemento deve ser exibido acima ou abaixo de outro. O valor da Z-index é um número inteiro que pode variar de 0 a 2147483647.
Por exemplo, se você tem dois elementos na tela, um com Z-index de 10 e outro com Z-index de 5, o elemento com Z-index de 10 será exibido acima do elemento com Z-index de 5.
Um exemplo de uso de Z-index em um trecho de código HTML seria o seguinte:
<div style="position: relative; z-index: 10;">
Elemento 1
</div>
<div style="position: relative; z-index: 5;">
Elemento 2
</div>
Neste exemplo, o elemento 1 será exibido acima do elemento 2, pois tem um Z-index maior.
Além disso, a Z-index também pode ser usada para definir a ordem de sobreposição de elementos em camadas. Por exemplo, se você tem três elementos na tela, um com Z-index de 10, outro com Z-index de 5 e outro com Z-index de 0, o elemento com Z-index de 10 será exibido acima dos elementos com Z-index de 5 e 0.
Um exemplo de uso de Z-index em camadas em um trecho de código HTML seria o seguinte:
<div style="position: relative; z-index: 10;">
Elemento 1
</div>
<div style="position: relative; z-index: 5;">
Elemento 2
</div>
<div style="position: relative; z-index: 0;">
Elemento 3
</div>
Neste exemplo, o elemento 1 será exibido acima dos elementos 2 e 3, pois tem um Z-index maior.
A Z-index é uma ferramenta muito útil para controlar a ordem de sobreposição de elementos na tela. Ela pode ser usada para definir qual elemento deve ser exibido acima ou abaixo de outro, bem como para definir a ordem de sobreposição de elementos em camadas.