CSS: Posicionamento Top e Left

O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões (horizontal, vertical e em camadas).

Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A origem da posição absoluta será a posição do objeto no nível imediatamente superior. O posicionamento relativo se refere à posição anterior do objeto.

position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto

Exemplo: considere as quatro imagens a seguir:

<div class=”imagem1″>
<img src=”T1.gif” width=150 height=72 border=1> 1 Posição 0 0
</div>
<div class=”imagem2″>
<img src=”T2.gif” width=150 height=72 border=1> 2 Posição 0 200
</div>
<div class=”imagem3″>
<img src=”T3.gif” width=150 height=72 border=1> 3 Posição -25 -25
</div>
<div class=”imagem4″>
<img src=”T4.gif” width=150 height=72 border=1> 4 Posição 100 0
</div>

Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua localização original obtemos a imagem ao lado. Os retângulos claros indicam a posição original da imagem:

DIV.imagem1 {
position: relative;
top: 0px;
left: 0px;
}
DIV.imagem2 {
position: relative;
top: 0px;
left: 200px;
}
DIV.imagem3 {
position: relative;
top: -25px;
left: -25px;
}
DIV.imagem4 {
position: relative;
top: 100px;
left: 0px;
}

Usando posicionamento absoluto, o bloco é movido em relação ao canto superior es-querdo do browser.

DIV.imagem1 {
position: absolute;
top: 0px;
left: 250px;
}
DIV.imagem2 {
position: absolute;
top: 100px;
left: 0px;
}
DIV.imagem3 {
position: absolute;
top: 160px;
left: 120px;
}
DIV.imagem4 {
position: absolute;
top: 200px;
left: -80px;
}

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 corres-ponde à 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.

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

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Notifique-me de novos comentários por e-mail