CSS HTML Document Flow

Document flow merupakan suatu konsep yang digunakan oleh User Agent untuk menempatkan elemen-elemen HTML di dalam dokumen. Di dalam suatu dokumen HTML dapat terjadi dua jenis document flow, yaitu Normal dan Ubnormal. Normal document flow merupakan proses penempatan elemen-elemen HTML, dimana semua elemen membawa nilai posisi default atau Static Positioning. Pada kondisi ini, setiap elemen akan ditempatkan saling berturutan dari atas ke bawah di dalam dokumen. Sedangkan untuk Ubnormal document flow terjadi ketika suatu elemen HTML keluar dari aliran normal dokumen, yang mana terjadi sebagai akibat ditempatkannya elemen tersebut secara Absolute, Fixed atau Relative dan menggunakan attribute Float. Sketsa dari normal document flow dapat dilihat pada gambar di bawah ini :

Sedangkan untuk perilaku dari ubnormal flow dapat dilihat pada masing-masing penyebab terjadinya ubnormal flow.

source: http://iznyn.com

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

CSS Absolute Positioning

Absolute positioning merupakan suatu attribute CSS yang digunakan untuk mengatur posisi suatu elemen secara bebas, relatif terhadap element induk terdekat yang telah keluar dari aliran normal dokumen. Ketika suatu elemen diposisikan secara Absolute, maka elemen tersebut akan keluar dari aliran normal dokumen dan membentuk layer baru bersama elemen-elemen turunannya. Kemudian dari layer baru ini, terbentuk sistem penempatan elemen baru yang tidak terpengaruh oleh elemen encestor (elemen induk) maupun elemen sibling (elemen yang mempunyai induk yang sama). Untuk menempatkan absolute elemen kita memerlukan attribute offset (top, bottom, left, right) dan apabila kita tidak menentukan attribute ini, maka elemen tersebut akan ditempatkan di pojok atas kiri dari elemen induknya. Sedangkan untuk aliran normal dokumen sebelumnya akan menganggap bahwa elemen yang diposisikan secara absolute sudah tidak ada lagi dan digantikan oleh elemen yang di dalam urutan markup berada di bawahnya. Seperti tampak pada gambar di bawah ini :

contoh:

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

source: http://iznyn.com

Tambahan:
Absolute artinya Semaunya sendiri… bisa juga menggunakan elemen z-index
z-index:-1 artinya dia akan berada dibelakang [semakin negetif akan semakin dibelakang…semakin positif semakin di depan]