29 de agosto de 2007

CSS e Z-index

CSS trabalha em 3 dimensões (altura, largura e profundidade), a maioria das pessoas que trabalham com css, conhece as duas primeiras dimensões, mas a terceira dimensão (profundidade) é pouco conhecida.



A propriedade Z-index trabalha a ordem em que os elementos aparecem na pagina, dando um efeito de profundidade (3D). Essa propriedade sobrepõe um elemento que tenha um z-index maior a outro que tenha z-index menor. É como se fosse as camadas dos programas de edição de imagem (photoshop, photopaint ...).



Suponha que você queira que a imagem "importante.jpg" fique sobre a imagem "nao-importante.jpg" . Você pode usar z-index para resolver essa situação, basta colocar um position:absolute; nas imagens e um numero z-index maior na imagem "importante.jpg".




.nao-importante {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 1;
}
.importante {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 2;
}



Nota:
Para funcionar corretamente, os elementos que receberão a propriedade z-index devem ter a propriedade position (position:absolute , position:relative ...)


Nota 2:
Valores Z-index negativos só são aceitos nas versões mais recentes dos browsers.



Exemplos:




Referencias:




Tags:

4 comentários:

Paulo H. disse...

Muito bom!!

Valeu mesmo! Já de cara consegui resolver meu problema com sub-menu!

Parabéns pelo blog!

Guido disse...

Obrigado pelo comentário e pela visita.

:)

Sissy disse...

Olá, Guido.
Adorei o blog, de muito bom gosto. E principalmente a forma como as informação estão dispostas e a clareza com qeu eu entendi o conteúdo.

Beijos.

Guido disse...

Obrigado Sissy :)