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
Muito bom! Busquei no google por z-index para sanar minha dúvida, e com certeza o seu blog, me atendeu! vlw
Por: Diaz em 23/Set/2008
às 09:47:46
nao consigo visualizar seus codigos. achei que tivesse digitado algo errado mas mesmo copiando e colando o codigo não consigo visualizar.
Por: Luciano em 1/Nov/2008
às 09:29:26
Não entendi Luciano?
Talvez sejam as aspas que o blog gera?
me manda um e-mail que tento te ajudar!
abraço
Por: Paulo Fernandes em 3/Nov/2008
às 07:26:21
Gostei do post. Seu blog anda me ajudando muito pois estou trabalhando muito com CSS.
Abraços.
Por: Felipe em 3/Fev/2009
às 16:01:01
só uma correção:
no seu exemplo, acho q vc inverteu um pouco as coisas…
no caso, o eixo “Y” representa a altura, e o “Z” a profundidade..
no mais… parabéns pelo blog!! =]
Por: dezinha em 9/Fev/2009
às 15:28:26
dezinha
é isso mesmo, errei nessa parte
desculpa
já está corrigido
Por: Paulo Fernandes em 9/Fev/2009
às 16:04:17
A melhor matéria sobre z-index q encontrei na net.
Valew me ajudou mt!
Por: Paulo Fernando em 11/Mar/2009
às 22:02:00
po… passei o dia td tentando entender isso e o seu foi o mais simples e o mais instrutivo
obrigado
Por: victor freitas em 22/Mai/2009
às 13:23:05
belo tuto , raido e descritivo
Por: Vinicius em 7/Ago/2009
às 10:03:51
tenho um site no ie6 q o menu esta atras do slide show como resolvo isso para ie6, quebrei a cabeça.
Por: flavia em 19/Ago/2009
às 16:20:44