Joomla Amazônia – Seu site de tutoriais e curso de Joomla no Brasil

Qua19062013

Last updateD, d M Y ga

Back Você está aqui: Home Tutoriais HTML/CSS CSS Propriedades do CSS visibility e z-index

CSS

Propriedades do CSS visibility e z-index

 

z-index

A propriedade z-index permite ordenar os objetos em camadas. É um eixo de profundidade. Para usá-la, basta definir em cada objeto: z-index: número onde número é a camada de exibição. Quanto maior o número, mais alta a camada. o corresponde à camada do texto. Se um objeto tiver z-index menor que zero aparecerá atrás do texto. Se z-index for maior que zero, aparecerá na frente. Quando não é definido ou quando z-index: 0 o bloco ocupará a mesma camada que o texto.


Exemplo:

<html>
<head>
<style type="text/css">
<!--
#box1{
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}

#box2{
position: absolute;
left: 130px;
top: 130px;
z-index: 2;
}

#box3 {
position: absolute;
left: 160px;
top: 160px;
z-index: 3;
}

#box4 {
position: absolute;
left: 190px;
top: 190px;
z-index: 4;
}
-->
</style>
</head>
<body>
<div id="box1">
<img src="/css1.jpg" width=150 height=150 border=1>
</div>

<div id="box2">
<img src="/css2.jpg" width=150 height=150 border=1>
</div>

<div id="box3">
<img src="/css3.jpg" width=150 height=150 border=1>
</div>

<div id="box4">
<img src="/css5.jpg" width=150 height=150 border=1>
</div>
</body>
</html>

Veja como ficou:
img41

visibility

Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque não remove o espaço antes ocupado pela imagem:


visibility: hidden | visible

Exemplo:

IMG {
visibility: hidden;
} // torna invisíveis todas as imagens