Posicionamento relativo com CSS

Quando declaramos posição relativa ( position: relative ) não acontece nada no posicionamento do elemento, mas quando incrementamos as propriedades top, right, bottom e left o elemento de movimenta apartir da sua posição inicial até o respectivo valor definido.

As propriedades right e left são destinadas a controlar o elemento no eixo X, respectivamente as propriedades top e bottom controlam o elemento no eixo Y.

Exemplo:

XHTML

CSS

* { margin: 0; padding: 0; z-index: 1; } #um, #dois, #tres { width: 200px; height: 50px; margin: 20px; border: 1px solid #ccc; line-height: 50px; text-align: center; }

Teste essa parte do código e veja que estão normais as divs.

exemplo posicionamento relativo 1

Agore declare as seguintes propriedades e valores para a div#dois:

#dois { position: relative; top: 30px; left: 40px; background: #eee; }

Veja que o resultado é que a div#dois sai da sua posição inicial até a distância definida pelo top e left, mas perceba que seu espaço aonde ocupava é preservado.

Como na imagem seguinte:

exemplo posicionamento relativo 2