Início /Programação /CSS /Como usar a propriedade z-index do CSS

Como usar a propriedade z-index do CSS

Por: Angelo Luis Ferreira | 30/12/2019 Acessos: 15.797

Neste artigo vamos mostrar como utilizar corretamente a propriedade z-index no CSS. Esta propriedade que parece difícil de entender, apenas indica qual é a ordem de camada de um elemento HTML. Um elemento com maior ordem de camada estará na frente de um elemento com menor ordem.

Propriedade z-index: Todo elemento HTM pode ser posicionado na página web através das coordenadas x (horizontal) e y (vertical). Entretanto, a propriedade z-index trabalha com o eixo z que é responsável pelo cálculo e posicionamento da profundidade de qualquer elemento HTML, ou seja determina se um elemento está mais próximo ou mais distante da tela.

Atenção: o z-index funciona apenas em elementos posicionados (position: absolute, position: relative, position: fixed, ou position: sticky).

Exemplo 1  - Posicionamento sem usar a propriedade z-index

1. Veja no exemplo abaixo onde posicionamos 3 quadrados apenas indicando os eixos x (propriedade left), e y (propriedade top):

1.1. Observe que as camadas dos quadrados ficarão dispostas uma sobre a outra de acordo com a ordem definida no HTML. Portanto o último elemento, div com o id=3 será definido como a última camada.

HTML

<div id = "quadrado1"></div>
<div id = "quadrado2"></div>
<div id = "quadrado3"></div>

CSS

#quadrado1 {
  background: #FF0000;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;  
}

#quadrado2 {
  background: #00FF00;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 50px;  
}

#quadrado3 {
  background: #0000FF;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;  
}

  😀 Veja como ficam nossos elementos HTML sem a propriedade z-index:


  See the Pen
  Propriedade z-index - CSS by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Exemplo 2 - Posicionamento usando a propriedade z-index em um elemento

2. Agora queremos que o quadrado (id = 2) fique posicionado na última camada, ou seja na frente dos demais quadrados.

2.1. Observe que usamos z-index = 3, mas como não tem nenhum elemento definido com z-index, poderíamos definir o seu valor com qualquer número maior que zero.

HTML

<div id = "quadrado1"></div>
<div id = "quadrado2"></div>
<div id = "quadrado3"></div>

CSS

#quadrado1 {
  background: #FF0000;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#quadrado2 {
  background: #00FF00;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 3;
}

#quadrado3 {
  background: #0000FF;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;  
}

 😀 Veja como ficam nossos elementos HTML sem a propriedade z-inde


  See the Pen
  Propriedade z-index (2) - CSS by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Exemplo 3 - Posicionamento usando a propriedade z-index em mais de um elemento

3.1. Agora queremos que o quadrado (id = 1) fique posicionado na última camada, ou seja na frente dos demais quadrados.

3.1.1. Observe que definimos z-index = 4 para o quadrado id=1, pois o quadrado id=2 já estava definido com z-index = 3, assim podemos posicionar o primeiro quadrado na primeira camada, pois possui o maior valor.

HTML

<div id = "quadrado1"></div>
<div id = "quadrado2"></div>
<div id = "quadrado3"></div>

CSS

#quadrado1 {
  background: #FF0000;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 4;
}

#quadrado2 {
  background: #00FF00;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 3;
}

#quadrado3 {
  background: #0000FF;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;  
}

 😀 Veja como ficam nossos elementos HTML sem a propriedade z-index:


  See the Pen
  Propriedade z-indez (3) - CSS by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Exemplo 4 - Posicionamento usando a propriedade z-index com valor negativo

4. Neste exemplo vamos colocar o quadrado id=2 na camada mais inferior, ou seja, abaixo de todos os quadrados. Para isto podemos utilizar o valor de z-index negativo. Quanto menor o número, mais baixa é a camada de um item HTML.

4.1 Observe que definimos z-index = -1, mas como não tem nenhum elemento definido com z-index, poderíamos definir o seu valor com qualquer número menor que zero.

HTML

<div id = "quadrado1"></div>
<div id = "quadrado2"></div>
<div id = "quadrado3"></div>

CSS

#quadrado1 {
  background: #FF0000;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
}

#quadrado2 {
  background: #00FF00;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
}

#quadrado3 {
  background: #0000FF;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;  
}

😀 Veja como ficam nossos elementos HTML sem a propriedade z-index:

  See the Pen
  Propriedade z-index (4) -CSS by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

TENTE VOCÊ MESMO

No nosso editor HTML, altere os valores da propriedade z-index para visualizar diferentes posicionamentos dos quadrados dos exemplos acima. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados após modificar o código).

Tente você mesmo »

Documentação Oficial

1. [z-index] » MDN Web Docs - Mozilla

2. [position] » MDN Web Docs - Mozilla

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO