Olá galera!
Hoje explicarei um pouco sobre o poder do position absolute. Com esta propriedade do CSS, você consegue colocar o elemento em qualquer lugar da tela, basta apenas configurar opcionalmente as propriedades top, left, right, bottom.
Apenas uma observação sobre o position absolute, top, left, right e bottom.
- Position Absolute coloca o elemento fixo na página, cuidado com o seu uso.
- As propriedades top, left, right e bottom, sempre devem ser usadas com o position.
Bom chega de conversa e vamos ao código descobrir do que ele é capaz!
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Position Absolute by aprendacss.wordpress.com</title>
<style type=”text/css”>#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
}#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
}#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
}</style>
</head>
<body>
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</body>
</html>
Olha como deve ter ficado:
Agora se definirmos position: absolute neles, vamos ver o que acontece?
#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;
}
Nossa só está aparecendo o último. Porque será?
Isso acontece devido a ordem de empilhamento do elementos, no próximo artigo, falarei sobre o empilhamento e a propriedade z-index. Mas agora vamos voltar ao position absolute. Lembra que acima alertei sobre o uso do position absolute, agora vocês viram o que acontece.
Vamos definir a propriedade top para as divs, posiciona2 e posiciona3, definiremos valores diferentes para notar o que acontecerá com o elemento, e para aproveitar tempo, definiremos a propriedade left para a div posiciona1.
#posiciona1{
background-color: #F00;
width: 50px;
height: 50px;
position: absolute;
left: 150px;
}#posiciona2{
background-color: #0F0;
width: 50px;
height: 50px;
position: absolute;
top: 0;
}#posiciona3{
background-color: #00F;
width: 50px;
height: 50px;
position: absolute;
top: 90px;
}
Pronto pessoal! Neste artigo apresentei o poder do position: absolute e das propriedades top e left;
No próximo artigo falarei sobre a propriedade z-index, e utilizarei o mesmo exemplo de código para ficar bem claro poder dessa combinação.
Até o próximo.
[...] 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, [...]
Por: Z-Index « Aprenda CSS em 12/Ago/2008
às 17:04:31
Ola Paulo;
Muito legal o seu metodo didatico, facil de entender devido a forma com que expõe seus pensamentos, e utilizando exemplos.
Grande abraço e muito sucesso pra você.
Por: Lucio Aparecido Pivoto em 21/Abr/2009
às 19:11:37