Olá galera.
Como prometido, hoje explicarei o poder da propriedade z-index.
Geralmente ouvimos as pessoas falar sobre eixo X e eixo Y, que seriam respectivamente as linhas Horizontais e Verticais. O Z-index é o que define a Profundidade, seria o eixo Z.
Imagine em um edificio. Se fossemos definir o eixo X, Y e Z, teriamos:
- X=> Quantidade de metros da fachada;
- Z=> Quantidade de metros da porta ao fundo;
- Y=> Quantidade de apartamentos, altura;
Bom, se nossa área fosse construção, teriamos entendido, mas como é programação, talvez tenha ficado um pouco vaga essa idéia. Mas se pararmos para pensar um pouco e pegarmos o artigo anterior onde faço referência ao Position Absolute, talvez fique mais claro. Vamos analizar o segundo print daquele artigo, o que temos está abaixo, tanto o código quanto o print.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</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>
Notamos que os elementos estão sobre-postos, mas porque só aparece o azul, que no caso é o último.
Aparece só o azul, porque a ordem natural do empilhamento(z-index), é a seguinte, o primeiro elemento do código recebe o z-index=1[ no caso a div com ID posiciona1 ], e o próximo elemento recebe z-index=2[ no caso a div com ID posiciona2 ] e assim por diante, esta é a ordem natural do empilhamento, e por esse motivo que aparece somente o azul sobre os outros. Abaixo definirei as posições dos elementos para que eles se sobreponham, porém na ordem natural.
#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;
}
Empilhamento Natural
Como podem observar apenas adicionei a propriedade top, você pode adicionar a outras propriedades como left, right e bottom.
Agora irei alterar a propriedade z-index para deixar o segundo elemento [ o box verde ] na frente dos outros e aproveito para finalizar o artigo colocando todo o código do exemplo HTML+CSS.
Até o próximo pessoal.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</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>
Alterando a Ordem de Empilhamento dos Objetos
Bem nós mandamos ele ficar à 50% do topo e à 50% da esquerda, e é exatamente a onde ele está tente redimensionar a janela e verá para onde ele irá. [ ele não pode mudar muita coisa não, tem que ficar a 50% do topo e da esquerda de acordo com o tamanho da janela que você deixou ]
