Absolute Positioning dan Relative Positioning
This idea is posted in
Absolute positioning dan Relative positioning merupakan tool yang cukup bagus dalam penyusunan layout dokumen, baik ketika digunakan secara individu maupun gabungan antara keduanya. Artikel ini akan membahas tentang kedua attribute ini secara mendalam.
Document Flow
Sebelum kita membahas lebih dalam tentang Absolute Positioning dan Relative Positioning, saya akan sedikit menjelaskan tentang Document Flow. Document flow sendiri 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. Untuk Relative dan Absolute Positioning dapat dilihat pada penjelasan berikutnya.
Perilaku dari 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 :
Untuk lebih jelasnya perhatikan contoh dibawah ini :
Misalkan kita memiliki kode HTML sebagai berikut :
<body>
<h1>Absolute Positioning</h1>
<p>Lorem ipsum .....</p>
<div>
<h2>Sub Heading</h2>
<p class=“abs”>Lorem ipsum ......</p>
</div>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</body>
Kemudian misalkan saja kita posisikan elemen p.abs yang disarangkan didalam elemen div secara absolute, berikut kode CSS-nya :
.abs {
position: absolute;
top: 30px;
left: 30px;
background-color: #e4e4e4;
border: 1px dashed #aaa;
}
Hasil dari kode diatas dapat dilihat disini
Dari contoh tersebut, terlihat bahwa elemen p diposisikan secara bebas, bahkan ketika dia disarangkan pada elemen yang lainnya
Sekarang kita rubah kode CSS diatas dengan memposisikan elemen div secara absolute, sebagai berikut :
div {
position: absolute;
top: 40px;
left: 40px;
width: 400px;
background-color: #d4d4d4;
border: 1px dashed #888;
}
Hasil dari kode diatas dapat dilihat disini
Opps, sekarang elemen p ikut berubah mengikuti elemen div, mengapa? Berikut penjelasannya. Ketika elemen p menjadi satu-satunya elemen di dalam dokumen yang diposisikan secara absolute, maka dia diposisikan (dalam hal ini dengan menggunakan attribute offset) relatif terhadap elemen body, dalam hal ini elemen body bertindak sebagai elemen induk terdekat yang mempunyai perlakuan khusus. Namun kemudian, ketika elemen div yang merupakan elemen induk dari p diposisikan secara absolute, maka elemen p tidak lagi diposisikan relatif terhadap body namun diposisikan relatif terhadap elemen div, karena sekarang elemen div-lah yang bertidak sebagai elemen induk terdekat yang mempunyai perlakuan khusus.
Selain itu, berdasarkan contoh diatas terlihat bahwa elemen div disertakan nilai width sebesar 400px, yang juga menyebabkan elemen p mengikuti nilai ini. Dan juga terlihat bahwa kontainer div tidak terpengaruh oleh tinggi dari elemen p. Ketinggian elemen div hanya mengembang berdasarkan kehadiran dari elemen turunannya yang masih mengikuti aliran normal (dalam contoh diatas adalah elemen h2). Dengan kata lain elemen div diatas hanya sebagai acuan dari penghitungan posisi elemen turunannya.
Perilaku dari 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.
Untuk lebih jelasnya perhatikan contoh dibawah ini :
Misalkan kita memiliki kode HTML sebagai berikut :
<body>
<h1>Absolute Positioning</h1>
<p>Lorem ipsum .....</p>
<div>
<h2>Sub Heading</h2>
<p class=“rel”>Lorem ipsum ......</p>
</div>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</body>
Kemudian misalkan saja kita posisikan elemen div secara relative, berikut kode CSS-nya :
div {
position: relative;
top: 30px;
left: 30px;
background-color: #e4e4e4;
border: 1px dashed #aaa;
}
Hasil dari kode diatas dapat dilihat disini
Sebagai tambahan, berdasarkan contoh diatas bahwa elemen yang diposisikan secara relative, lebarnya akan tetap seperti saat berada pada aliran normal, kecuali jika secara langsung menentukannya dengan menggunakan attribute width. Hal ini menyebabkan munculnya horisontal scroll-bar.
Kombinasi Absolute dan Relative Positioning
Ketika attribute position, Absolute dan Relative, digunakan bersama-sama (dalam arti elemen induk diposisikan salah satu dari attribute ini dan element induk diposisikan secara sebaliknya) maka mereka dapat menjadi “tool” yang sangat bagus di dalam penyusunan layout dokumen. Disini ada dua kombinasi yaitu Elemen induk diposisikan secara Absolute dengan elemen turunan di posisikan secara Relative dan Elemen induk diposisikan secara Relative dengan elemen turunan di posisikan secara Absolute. Dari kedua opsi tersebut, opsi terakhirlah yang paling menarik, jadi saya hanya akan membahas untuk opsi ini, toh effek yang kita dapatkan untuk opsi pertama tidak jauh berbeda ketika kita memposisikan suatu element secara absolute.
Dengan memposisikan suatu elemen induk secara relative sedangkan elemen turunan secara absolute, maka efek yang didapatkan adalah bahwa kita dapat memposisikan suatu elemen relatif terhadap kontainernya tanpa kontainer harus keluar dari aliran normal dokumen. Tehnik ini biasanya dilakukan dengan memposisikan elemen induk secara relative tanpa menentukan attribute offset sehingga elemen tersebut akan tetap berada ditempatnya sesuai dengan aliran normal dokumen. Dari sini kita kemudian dapat memposisikan elemen turunannya berdasarkan luas dari elemen induknya dengan menggunakan absolute positioning. Seperti terlihat pada gambar di bawah ini :
Untuk lebih jelasnya dapat anda lihat pada contoh di bawah ini, dimana menggunakan tehnik tersebut diatas untuk menenmpatkan link “skip to content” di sebelah kanan atas dari kontainer header.
HTML code
<body>
<div id="header">
<h1>Site Header</h1>
<span>Skip to content</span>
</div>
<div id="content">
<h2>Page Header</h2>
<p>Lorem ipsum ......</p>
<p>Lorem ipsum ......</p>
</div>
<div id="footer">
<p>copyright © 2008-2009 iznyn</p>
</div>
</body>
CSS code
body {margin: 0;}
a{color: #000;}
a:hover{color: #666;}
#header {
position: relative;
height: 80px;
background-color: #ccc;
border-bottom: 2px solid #333;
padding: 10px;
}
#header span {
position: absolute;
right: 20px;
bottom: 10px;
font-weight: bold;
}
#content, #footer {
background-color: #eee;
padding: 10px;
border-bottom: 2px solid #333;
}
#footer {
background-color: #ccc;
}
Hasil dari kode diatas dapat dilihat disini
3 Comments
#01
zulkifli @
#02
adiputra @
#03
taufan @
Join Discussion