CSS Relative Positioning

Perilaku dari Relative Positioning hampir sama dengan Absolute Positioning. Hanya saja dari pada memposisikan elemen relatif terhadap elemen induk terdekat yang telah mendapatkan perlakuan khusus (sebagai akibat diposisikannya suatu elemen induk secara absolute, relative maupun fixed), Relative Positioning akan memposisikan elemen relatif terhadap posisi awal dari elemen ketika berada pada aliran normal. Perhatikan gambar dibawah ini :

Sebagai catatan bahwa pada gambar diatas, box 2 kita asumsikan diberikan suatu nilai lebar sehingga lebih kecil dari semula, hal ini hanya untuk mempermudah penjelasan saja. Berdasarkan gambar tersebut, ketika suatu elemen diposisikan secara relative maka dia akan membentuk layer baru beserta elemen turunannya dan menariknya area yang semula dia duduki tidak ditempati oleh elemen dibawahnya atau dengan kata lain bahwa memposisikan suatu elemen secara relative tidak akan merusak aliran normal dari kontainernya. Dan kemudian penempatan elemen akan didasarkan pada posisi awal dari elemen saat berada pada aliran normal.

Contoh:

#div{
position: relative;
top: 30px;
left: 30px;
background-color: #e4e4e4;
border: 1px dashed #aaa;
}

resume:
jadi Relative Positioning maksudnya adalah dia akan bergeser dari tempat seharusnya, negatif artinya keluar, positif artinya kedalam.
Hal ini, bisa juga menggunakan property LEFT, RIGHT, dan BOTTOM…

source: http://iznyn.com