CSS - Posicionamento Absoluto e Relativo

Esse tipo de marcação permite posicionar elementos na página de acordo com as margens (topo, esquerda, direita e abaixo). É exatamente como definir a moldura de um quadro e sua posição na parede.
Há o caso de termos uma parede lisa, nunca furada. Podemos posicionar o quadro em qualquer lugar, bastando indicar a que posição do topo e da esquerda que queremos, por exemplo.

Posicionamento Absoluto

Se na nossa parede já existe anteriormente um quadro, podemos escolher novas posições ao lado, em cima.. etc que não interferem na visualização do quadro atual. Mas no posicionamento absoluto podemos colocar um quadro em cima do outro. Sim. A arte contemporânea dá um risinho de leve nesse momento.
E para termos controle sobre qual deve aparecer primeiro, há algumas regrinhas.

Precisamos definir a "profundidade" de cada quadro. Essa profundidade é marcada através do atributo "z-index". Quanto menor o z-index mais "escondido" um objeto estará. Se o z-index não for definito esta ordem será expressa através da ordem de escrita dos elementos no código. O primeiro objeto colocado será o primeiro "do fundo".. ate o último que ficará "por cima".
Exemplo de código:

.img1 {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
      width: 100px;}

.img2 {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 2;
      width: 100px;}

.img3 {
      position: absolute;
      top: 40px;
      left: 40px;
      x-index: 3;
      width: 100px;}

Esse código deve produzir um efeito de imagens em cascata...

Posicionamento Relativo

Esse tipo de posicionamento define a posição do quadro de acordo com os outros quadros na parede. O espaço reservado para determinado quadro é mantido e a sobreposição de elementos só acontece quando há um quadro não definido no meio. Um jão perdido.
Exemplo de código:

span {
          font-size: 10px;}

.super {
           position: relative;
           top: -1px;}

.sub {
          position: relative;
          bottom: -1px;

.shiftleft {
          position: relative;
          left: -1px;}


.shiftright {
          position: relative;
          right: -1px;}
 

Este código pode ser usado para se escrever sobrescrito, subscrito, a esquerda e a direita, respectivamente.

OBS

Há possibilidade de brincar com o posicionamento dos elementos na página, dependendo da finalidade. É possível criar uma div com posicionamento relativo e inserir dentro dela outra div com posicionamento absoluto. As definições do top, left, right e bottom da div interna absoluta, neste caso, vão se referir a div relativa externa e não a página inteira.

Leitura Recomendada:

Contém exemplos e outras explicações

Majour