position: static, relative e absolute

position: relative; O elemento é criado na página, após, se houver informações de deslocamento vertical (top ou bot), assim como informações de deslocamento horizontal (left ou right), elas irão reposicionar o elemento com base em sua posição inicial, ou seja:

Se você cria um elemento com posição relativa, podemos imaginar que o desenho dele é carregado na página, porém, na hora em que ele será efetivamente carregado ele pode ser deslocado, alterando, portanto, a posição de exibição do elemento, mas não a posição efetiva deste. A propriedade static, inclusive, definirá o elemento para a posição de seu desenho, ou seja, a sua real posição incial.

Position: absolute; O elemento é removido do fluxo do documento, não deixando espaço a sua criação no layout da página, ou seja, não deixando o seu desenho. O seu posicionamento utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.

Portanto, em breves palavras:

Relative: A posição relativa posiciona o elemento em relação a si mesmo. A sua posição será definida a partir de seu canto superior esquerdo, ponto inicial do elemento, calculando com base nisso o deslocamento acrescido.

Absolute: O deslocamento é calculado com base no seu elemento pai, utilizando o seu início (canto superior esquerdo) como ponto inicial e calculando o seu posicionamento com base nesse ponto, ou seja, usando outro elemento como referência.

Espero ter ajudado.

New Saudacoes();

; )