Publicado por: Paulo Fernandes | 12/ago/2008

Z-Index

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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>

Position Absolute, um elemento sobre o outro

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

Empilhamento Natural

Alterando o posicionamentoAlterando o posicionamento

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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

Alterando a Ordem de Empilhamento dos Objetos

About these ads

Responses

  1. Muito bom! Busquei no google por z-index para sanar minha dúvida, e com certeza o seu blog, me atendeu! vlw

  2. nao consigo visualizar seus codigos. achei que tivesse digitado algo errado mas mesmo copiando e colando o codigo não consigo visualizar.

  3. Não entendi Luciano?
    Talvez sejam as aspas que o blog gera?
    me manda um e-mail que tento te ajudar!
    abraço

  4. Gostei do post. Seu blog anda me ajudando muito pois estou trabalhando muito com CSS.

    Abraços.

  5. 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!! =]

  6. dezinha

    é isso mesmo, errei nessa parte

    desculpa

    já está corrigido

  7. A melhor matéria sobre z-index q encontrei na net.
    Valew me ajudou mt!

  8. po… passei o dia td tentando entender isso e o seu foi o mais simples e o mais instrutivo

    obrigado

  9. belo tuto , raido e descritivo

  10. tenho um site no ie6 q o menu esta atras do slide show como resolvo isso para ie6, quebrei a cabeça.

  11. tenho so uma duvida sobre zindex…tenho duas divs

    onde a primeira é um flash sem link e a segunda é uma img com link

    sendo que a primeira div deve ficar por cima da segunda..ela ocupa toda a largura do site…mas nao ocupa todo o espaço…fica transparente…e nessa parte transparente…tem uma div com img link embaixo…mas ela nao fica linkada por estar embaixo da div flash…e agora?

  12. Muito boa a explicação, já tinha lido a muuuito tempo aqui no seu blog, mas só hoje resolvi comentar.

    Parabéns.

  13. muito bom o CSS melhor coisa q eu já vi éh melhor q porno

  14. Eu tenho um documento que não possui atributos de z-index em nenhuma classe nem id, e criei uma daquelas “janelas” que só são exibidas ao passar o mouse pela palavra selecionada. O problema é que ela está jogando todo o conteúdo para baixo, queria que ela ficasse por cima do conteúdo que tem abaixo dela.

    Vou ter que colocar o z-index em todos os elementos da minha página?

    Abraços

    • Não!
      Basta você colocar um position: relative e um z-index: 9999;

      Z-index é o conceito de empilhamento, todo elemento automaticamente recebe um valor z-index

      Abraço

  15. Parabéns pelo Blog. Ele é de grande ajuda para podermos desenvolver novos sites usando essa poderosa tecnologia. Viva o CSS!!! Grande abraço!

  16. Ótima dica ;)

  17. cara muito bom o tutorial hehe morria e nunca saberia disso!!!

  18. Bem legal, vao ajudar muito.

  19. fui procurar no google e acabei para aqui… Valeu por tirar minha duvida…

  20. Reblogged this on Web Fácil.

  21. muito obrigado, me ajudou muito

  22. Cara, na boa, gostei muito deste post…
    Tava meio empancado com um problema dessa natureza (colocação de elementos) e cheguei até sua página. Adorei a forma sucinta com que você explicou uma questão relativamente complexa. Parabéns

  23. Artigo muito bom. Acho que entendi bem. rsrs

  24. Muito bom o método de ensino/exemplos,

  25. Muito bom! Ficou muito Fácil de entender!!
    Grande Abraço!


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.

%d blogueiros gostam disto: