Artigos CSS CSS Z-Index - Entendendo sobre o Eixo Z na web

Quando pensamos em posicionamento de elementos em páginas web, a primeira coisa que vem em nossa cabeça são os eixos X e Y que são os eixos horizontais e verticais, respectivamente.

Todo elemento que tentamos posicionar na página web vamos movendo usando esses dois eixos e assim conseguimos colocar ele onde queremos.

A propriedade z-index trabalha com um eixo que não é muito conhecido e tampouco usado pela maioria dos desenvolvedores, o eixo Z. O eixo Z é o eixo responsável pelo cálculo e posicionamento da profundidade de algum elemento, ou seja, é aquele que irá determinar se o elemento estará mais próximo ou mais afastado da tela.

Basicamente, os eixos X, Y e Z funcionam da seguinte forma, imagine o cenário de um prédio:

  • X=> Quantidade de metros da parte da frente do prédio;
  • Z=> Quantidade de metros da porta da frente ao fundo do prédio;
  • Y=> Altura do prédio;

Agora chega de tentar entender na teoria como essa propriedade funciona e vamos ver ela funcionando na prática:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Entendendo a propriedade z-index</title>
  <style type="text/css">

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
}

</style>
</head>
<body>

<div id="posiciona1"></div>
<div id="posiciona2"></div>
<div id="posiciona3"></div>

</body>
</html>
Listagem 1. Código da página index.html

O resultado do código acima pode ser visto abaixo:

Resultado da listagem 1
Figura 1. Resultado da listagem 1

Como podemos ver só está sendo exibido 1 box, que é o último (terceira div). Isso acontece porque os elementos vão recebendo automaticamente valores de z-index=1, z-index=2 e assim por diante. Nesse caso como o último box fica com o maior z-index, é ele quem aparece na frente.

Para entender melhor, mude seu código css para o código abaixo:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Entendendo a propriedade z-index</title>
  <style type="text/css">

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:0;
}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:25px;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:50px;
}


</style>
</head>
<body>

<div id="posiciona1"></div>
<div id="posiciona2"></div>
<div id="posiciona3"></div>

</body>
</html>
Listagem 2. Novo código css

O uso do código da listagem 2 irá mudar o posicionamento dos elementos, assim podemos ver todos eles, independente do valor de z-index.

Blocos posicionados
Figura 2. Blocos posicionados

Agora vamos forçar com que o box verde fique na frente de todos os outros, usando o z-index.

Altere seu código css para o seguinte:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Entendendo a propriedade z-index</title>
  <style type="text/css">

#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
top:40px;

}

#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top:65px;
z-index:4;
}

#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top:100px;
}

</style>
</head>
<body>

<div id="posiciona1"></div>
<div id="posiciona2"></div>
<div id="posiciona3"></div>

</body>
</html>
Listagem 3. Código CSS usando z-index

Com o código dessa forma, nosso box verde irá sobrepor todos os outros, pois assumimos para ele o valor de z-index=4 o que é maior do que o z-index=3 do último elemento.

Resultado final do uso de z-index
Figura 3. Resultado final do uso de z-index

Caso queira que o primeiro box(vermelho) seja o que fique frente, basta aplicar um z-index maior nele, e assim por diante com qualquer elemento na página, como mostra a listagem 4.

Vamos também colocar um texto de demonstração nas div’s para vermos que nas div’s que ficam “escondidas” o texto também acompanha o fundo e fica atrás do outro.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>Entendendo a propriedade z-index</title>
  <style type="text/css">

#posiciona1{
background-color: #F00;
width: 300px;
height: auto;
position: absolute;
top:40px;
z-index:5;
}

#posiciona2{
background-color: #0F0;
width: 300px;
height: auto;
position: absolute;
top:65px;
z-index:4;
}

#posiciona3{
background-color: #00F;
width: 300px;
height: auto;
position: absolute;
top:100px;
}

</style>
</head>
<body>

<div id="posiciona1">
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. 
Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. 
Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é 
amistosis quis leo. 
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num 
significa nadis i pareci latim. 
Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</div>
<div id="posiciona2">
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis.
Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. 
Nullam leo erat, aliquet quis tempus a, posuere ut mi. 
Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. 
Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. 
Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.
</div>
<div id="posiciona3">
Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis 
eleifend option 
congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
Lorem ipsum dolor sit amet, consectetuer 
Ispecialista im mé intende tudis nuam golada, vinho, uiski, carirí, rum da 
jamaikis, só num pode ser mijis.
Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
suscipit lobortis nisl 
ut aliquip ex ea commodo consequat.
</div>

</body>
</html>
Listagem 4. Deixando o primeiro box na frente

Como resultado podemos ver:

Resultado final do artigo.
Figura 4. Resultado final do artigo

Com isso eu encerro esse artigo, vimos como funciona a propriedade z-index e entendemos também como utilizar o eixo Z do plano cartesiano.