Z-index

O z-index é uma propriedade crucial no CSS que determina a ordem de empilhamento de elementos HTML sobrepostos. Quando temos múltiplos elementos ocupando o mesmo espaço na tela, o z-index define qual deles ficará por cima e qual ficará por baixo. Essa propriedade é especialmente útil em situações onde é necessário criar camadas visuais, como em modais, pop-ups e menus suspensos.

Características principais do z-index

Exemplo prático

Imagine que você tenha um site com um menu e uma imagem de fundo. Se o menu tem um z-index de 10 e a imagem de fundo um z-index de 5, o menu aparecerá acima da imagem. Aqui está um exemplo de código CSS:

.menu {
  position: relative;
  z-index: 10;
}

.background-image {
  position: relative;
  z-index: 5;
}

Dica importante

💡 Ao trabalhar com o z-index, lembre-se de que ele só funcionará corretamente em elementos que têm position diferente de static. Isso garante que você tenha controle total sobre a sobreposição dos elementos. Utilize o z-index com cuidado para criar interfaces limpas e eficientes!