Posicionamento com CSS: estático, absoluto, relativo e fixo
Quem está chegando agora ao mundo dos padrões web costuma se ver às voltas com duas propriedades do CSS
, que são fundamentais quando se deseja construir layouts sem tabelas: float e position. Neste texto vou falar um pouco sobre esta última.
Escrevo este texto motivado por um tópico sobre o assunto na lista webstandards-br. Vamos então ao que interessa.
Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto e fixo. Vamos tratar cada um separadamente.
Posicionamento estático
O posicionamento estático é definido pelo valor static da propriedade position. Assim: elemento { position: static }. Bem, na verdade o posicionamento padrão pra qualquer elemento é o estático, portanto não é necessário declará-lo explicitamente em seu CSS.
Um elemento posicionado estaticamente segue o fluxo normal dos elementos da página, ou seja, se posiciona abaixo do elemento imediatamente anterior e acima do imediatamente posterior, quando nenhum destes está posicionado de outra forma que não a estática.
Como já foi dito, o posicionamento estático é o padrão, portanto não precisa ser muito explicado. Você pode ver o comportamento dos elementos posicionados estaticamente no exemplo 1: posicionamento estático
Posicionamento relativo
O posicionamento relativo é definido pelo valor relative da propriedade position. Assim: elemento { position:relative }.
Quando posicionamos um elemento relativamente ele é posicionado de acordo com sua própria posição. Confuso? A princípio sim, mas vamos entender quais as vantagens disso.
As propriedades top, right, bottom e left têm efeito sobre elementos posicionados relativamente, ao contrário do que acontece com o posicionamento estático. E qual a diferença entre usar margin e usar uma das propriedades citadas acima? A diferença é que margin acrescenta seu valor ao tamanho do elemento. Confira o efeito do posicionamento relativo no exemplo 2: posicionamento relativo.
Mas a função mais importante do posicionamento relativo é definir o elemento como “posicionado”. Explico isso melhor logo abaixo.
Posicionamento absoluto
O posicionamento absoluto é definido pelo valor absolute da propriedade position. Assim: elemento{ position:absolute }.
O que costuma confundir os menos experientes é que o posicionamento absoluto é, de fato, relativo. Deu um nó na cabeça? Ainda não? Pois bem, continuemos.
Quando um elemento é posicionado absolutamente, sua posição é computada de acordo com a posição do elemento “posicionado” mais próximo, que o contém. Elemento “posicionado” é qualquer elemento que tenha seu posicionamento definido como relativo, absoluto ou fixo. Quando não há nenhum elemento “posicionado”, a posição é computada com relação ao elemento body, quando o documento for HTML (incluindo documentos XHTML enviados como text/html) ou html, quando o documento for XHTML de fato (enviado como application/xhtml+xml). Além disso, o elemento é removido do fluxo normal da página.
A teoria pode um pouco confusa mas a prática é bem simples. Veja no exemplo 3: elemento posicionado absolutamente dentro de um posicionado relativamente e no exemplo 4: elemento posicionado absolutamente dentro de um posicionado estaticamente.
Nunca é demais dizer que as propriedades top, right, bottom e left se aplicam a elementos posicionados absolutamente, bem como a qualquer elemento definido como “posicionado”.
Posicionamento fixo
O posicionamento fixo é definido pelo valor fixed da propriedade position. Assim: elemento { position:fixed }.
Quando um elemento é definido como posicionamento fixo, sua posição é computada com relação à parte visível do User Agent (em geral, o browser) em que a página está sendo exibida.
Infelizmente o Internet Explorer 6 não suporta o posicionamento fixo.
Acredito que não é necessária nenhuma explicação mais extensa sobre o posicionamento fixo. Veja o seu uso no exemplo 5: posicionamento fixo (lembrando que este exemplo não vai funcionar no Internet Explorer).
Bem, acho que é isso. Qualquer dúvida ou se notarem que esqueci de mencionar algo importante, podem comentar. E se quiserem ler um texto realmente bom sobre esse assunto, o Relatively absolute do Tommy Olsson (que, infelizmente, parou de blogar) é o melhor que eu conheço.
Compare preços de: moto cg 125, TV Samsung, Celulares da LG, Notebook Positivo, Livros de ficção, Macbook Pro 13 polegadas, Monitor 19, notebook hp
27 Set 2005 |
67 comentários... |
Comentar |
|
Muito esclarecedora as informações que você colocou neste post, gostei. Parabéns.