Position CSS

A propriedade Position do CSS, causa muita confusão quando se esta aprendendo HTML e CSS. Nesse artigo tentarei ser o mais breve e prático possível, para tentar explicar o seu funcionamento.
A propriedade position pode receber quatro valores principais...

• static
• fixed
• relative
• absolute

Fora esses quatro, existem mais dois valores que não são exatamente da própria propriedade, mas sim valores que podem ser aplicados em vários elementos, como o initial que serve para fazer um elemento voltar para o seu valor inicial, seu valor padrão. E também o valor inherit, que serve para herdar o valor da propriedade do seu elemento pai.

Mas voltando aos quatros valores...

position: static

O valor static é o valor padrão, não há muito o que se falar desse valor, ele apenas retorna o elemento para o seu fluxo normal do documento, o sua declaração não é muito necessária, pois os elementos já começam estáticos, salvo em alguns casos específicos, onde é preciso declarar para o elemento retornar ao padrão.

Uma declaração de uma div por exemplo, para estático é feito dessa forma...

div{
    position: static;
}

position: fixed

O valor fixed, faz o elemento se posicionar em relação a janela do navegador. Ao ser posicionado como fixo, o elemento não vai sair da posição definida, ou seja, se rolarmos a página do navegador, o elemento estará sempre fixo naquela posição. Elementos fixos não seguem o fluxo normal do documento, para os outros elementos o elemento fixo não existe, ocupando-os o seu lugar, fazendo com que o elemento fixo sobreponha-se aos outros elementos. É muito usado para posicionar elementos fixos no canto da tela, como botões de mídia sociais, botões para voltar ao topo da página, popups, etc...

Por exemplo, ao definir esses valores para uma div...

div{
    position: fixed;
    width: 500px;
    height: 500px;
    background-color: #09F;
    top: 100px;
    left: 100px;
}

A div ficara assim, fixa posicionada em relação à janela do navegador...

position: relative

O valor relative, faz com que o elemento se posicione em relação a si mesmo, ou seja, se definirmos um valor top para ele, exemplo 100px, o mesmo colocara uma distancia de 100px do ponto onde ele estava, empurrando-o para baixo, até o alcançar o seu topo, o mesmo vale para a sua esquerda, baixo e direita. Se o elemento relativo for empurrado por exemplo, 100px para baixo, ele sobrepõe sobre os outros elementos, mas os outros elemento não ocuparam esse 100px que ficaram vazios.

Por exemplo, ao definir esses valores para uma div...

div{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #09F;
    top: 100px;
    left: 100px;
}

A div ficara relativa a sua posição original...

position: absolute

O valor absolute, posiciona o elemento em relação a seu primeiro ancestral (elemento pai) que não seja estático, ou seja, a seu primeiro elemento pai definido como fixed, relative ou até mesmo absolute, caso não encontre um elemento pai não estático, ele se posicionara em relação a tag html.
Elementos absolutos não seguem o fluxo normal do documento, para os outros elementos o elemento absoluto não existe, ocupando-os o seu lugar, fazendo com que o elemento absoluto sobreponha-se os outros elementos.

Um exemplo é se temos uma div com a class pai com position relative, e uma div com a classe filho com position absolute...

.pai{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #FFFFFF;
    border: 1px #09F solid;
    top: 100px;
    left: 100px;
}
.filho{
    position: absolute;
    height: 350px;
    width: 350px;
    background-color: #09F;
    top: 100px;
    left: 100px;
}

O resultado ficará assim...