Z-Index no CSS

Tempo de leitura: 3 minutos

Z-Index no CSS: A propriedade z-index em CSS é fundamental para controlar a ordem de empilhamento dos elementos quando eles se sobrepõem. Imagine uma pilha de papéis: o papel de cima cobre os de baixo. O z-index funciona de forma similar, definindo qual elemento fica “por cima” dos outros em uma página web.

Neste artigo, vamos explorar em detalhes como funciona o z-index e como utilizá-lo para criar designs mais complexos e interativos.

O que é Z-index?

O z-index especifica o nível de empilhamento de um elemento posicionado. Ele determina qual elemento será exibido na frente quando dois ou mais elementos se sobrepõem.

Como funciona o Z-index?

Elementos Posicionados: O z-index só funciona em elementos que tenham uma propriedade position diferente de static (como relative, absolute ou fixed).
Contexto de Empilhamento: Cada elemento posicionado cria um contexto de empilhamento. Dentro desse contexto, os elementos com valores de z-index mais altos são exibidos na frente.
Valores: O z-index aceita valores numéricos, positivos e negativos. Valores mais altos indicam um nível de empilhamento maior.
Herança: O z-index não é herdado por elementos filhos.

Exemplo Prático

HTML

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

CSS

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.box1, .box2, .box3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: red;
  z-index: 1;
}

.box2 {
  background-color: green;
  z-index: 2;
}

.box3 {
  background-color: blue;
  z-index:    3;
}

Neste exemplo:

Todas as caixas estão posicionadas absolutamente dentro do contêiner.
A caixa 3, com z-index: 3, será exibida na frente, cobrindo as outras duas.
A caixa 1, com z-index: 1, será exibida por trás.

Quando usar Z-index?

Elementos sobrepostos: Para criar elementos que se sobrepõem, como modais, tooltips ou cards flutuantes.
Menus e navegação: Para criar menus suspensos ou elementos de navegação que se sobrepõem ao conteúdo principal.
Efeitos visuais: Para criar efeitos visuais como paralaxe ou transições suaves entre elementos.

Considerações Importantes

Contexto de Empilhamento: É fundamental entender o conceito de contexto de empilhamento para utilizar o z-index corretamente.
Valores Negativos: Valores negativos de z-index podem ser utilizados para enviar um elemento para trás.
Browser Compatibility: Embora o z-index seja amplamente suportado, é sempre recomendado testar em diferentes navegadores.
Outras Propriedades: O z-index funciona em conjunto com outras propriedades como position, top, right, bottom e left para criar posicionamentos precisos.

Conclusão

Z-Index no CSS: O z-index é uma ferramenta poderosa para controlar a ordem de empilhamento dos elementos em suas páginas web. Ao dominar essa propriedade, você poderá criar designs mais complexos e interativos, como modais, tooltips, menus suspensos e muito mais.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: