Publicado por: Paulo Fernandes | 8/jul/2008

Position Absolute

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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:

Sem position absolute

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;
}

Position Absolute Definido

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;
}

Posicionado Absolutamente com top e left Definidos

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.

Anúncios

Responses

  1. […] 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, […]

  2. 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ê.

  3. CSS e Tableless é shoooow

  4. Muito bom o seu site !

    PS: A foto é da Ilha da Madeira ?

    Luis

  5. Show. Valeu

  6. Estou a tentar usar o position absolute para sobreposicao de imagens.
    Mas ocorre um problema quando as sobreponho e mudo de resolução as imagens não ficam no sitio onde deveriam ficar sobrepostas. Alguma solucao para resolver?

  7. Opa, queria dizer q isso me ajudou muito…
    Agora o que curti mesmo foi esse botão de seguir ai de baixo do lado direito, que ao clicar sobre ele é exibido mais informações…
    Você poderia dizer como fazer esse botaozinho..
    Valeu


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: