Como usar a propriedade z-index do CSS
- Detalhes
- Angelo Luis Ferreira
- CSS
- Acessos: 15923
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-index:
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).
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
