Posicionamento absolute e relative
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). Embora os recursos de posicionamento não façam parte do CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam. position, top e left
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.
Sintaxe:
position: absolute | relative
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
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:
Exemplo position absolute:
<html>
<head>
<style type="text/css">
<!--
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
-->
</style>
</head>
<body>
<div id="box1">
<img src="/css1.jpg" width=150 height=150 border=1> 1 Posição 0 0
</div>
<div id="box2">
<img src="/css2.jpg" width=150 height=150 border=1> 2 Posição 0 200
</div>
<div id="box3">
<img src="/css3.jpg" width=150 height=150 border=1> 3 Posição -25 -25
</div>
<div id="box4">
<img src="/css5.jpg" width=150 height=150 border=1> 4 Posição 100 0
</div>
</body>
</html>
Veja como ficou:
Exemplo position relativa com as mesmas medidas da posição absolute:
<html>
<head>
<style type="text/css">
<!--
#box1 {
position: relative;
top: 50px;
left: 50px;
}
#box2 {
position: relative;
top: 50px;
right: 50px;
}
#box3 {
position: relative;
bottom: 50px;
right: 50px;
}
#box4 {
position: relative;
bottom: 50px;
left: 50px;
}
-->
</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 fica:
<html>
<head>
<style type="text/css">
<!--
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
-->
</style>
</head>
<body>
<div id="box1">
<img src="/css1.jpg" width=150 height=150 border=1> 1 Posição 0 0
</div>
<div id="box2">
<img src="/css2.jpg" width=150 height=150 border=1> 2 Posição 0 200
</div>
<div id="box3">
<img src="/css3.jpg" width=150 height=150 border=1> 3 Posição -25 -25
</div>
<div id="box4">
<img src="/css5.jpg" width=150 height=150 border=1> 4 Posição 100 0
</div>
</body>
</html>
Veja como ficou:
Exemplo position relativa com as mesmas medidas da posição absolute:
<html>
<head>
<style type="text/css">
<!--
#box1 {
position: relative;
top: 50px;
left: 50px;
}
#box2 {
position: relative;
top: 50px;
right: 50px;
}
#box3 {
position: relative;
bottom: 50px;
right: 50px;
}
#box4 {
position: relative;
bottom: 50px;
left: 50px;
}
-->
</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 fica:
| < Anterior | Próximo > |
|---|
