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.

Veja um exemplo em HTML.

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: