CSS
Propriedade Position do CSS
A propriedade position não serve para criar estruturas de layouts. Você o usará para coisas mais simples. Existem 3 tipos: relative, absolute e fixed. Entenda como eles funcionam e quais as suas relações.
Por Diego Eis
Entendendo a propriedade Position
O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css. O Position vai servir para fazer coisas mais simples.
Existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed.
Position Fixed
O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed.
Position Relative
Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.
O position relative posiciona o elemento em relação e ele mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.
Position Absolute
O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.
No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se referenciar por este terceiro div.
Logo, o div com position absolute referencia sua posição pelo div mais próximo que o envolve e que também tenha um position definido. Complicado, não é?
Uma ocasião bem simples onde usaríamos position é na home do Flickr. Onde temos aquela imagem bonita de capa e o nome do autor logo abaixo. Para posicionar o nome do autor lá no rodape do div, você utilizaria o Position. Veja a imagem de exemplo:
No Campus Online há um vídeo explicativo sobre a propriedade position:
Pingback: CSS: Entendendo a propriedade Position « Sergio’s Blog
Pingback: BD1 - Desenvolvimento de sites e sistemas para web. São Paulo - SP » Entendendo a propriedade Position | Tutorial CSS
Pingback: Entendendo a propriedade position do CSS | Andre Bellafronte
Pingback: Posicionamento estático, absoluto, relativo e fixo em CSS « Dicas Web e Design