Pada dasarnya ada lima value dari property position:
absolutefixedrelativestaticinherit
Anda bisa lihat informasi lengkap dari masing-masing value di halaman ini. Yang saya ingin angkat pada tulisan ini adalah kombinasi dari value relative dan absolute yang sejauh ini, merupakan salah satu trik CSS yang paling useful yang pernah saya ketahui. Banyak trik lain yang bisa dikembangkan dari trik ini. Berikut ini triknya:
<div id="out"> box diluar diset position: relative <div id="in"> box di dalam diset position: absolute + value top / right / bottom / left - nya</div> </div>
CSS-nya:
#out{
width:300px;
height:300px;
position:relative;
background:#efefef;
}
#in{
width:100px;
height:100px;
position:absolute;
bottom:0;
right:0;
}
Yang dilakukan oleh trik ini pada dasarnya adalah mengeset dua box, yang satu di luar dan yang satu di dalam. Box di luar memiliki value position: relative dan box yang di dalam memiliki value position:absolute ditambah value top/right/bottom/left-nya. Trik ini membuat posisi suatu elemen CSS relatif terhadap elemen lain. Aplikasi teknik ini bisa berupa slidetoggle caption, dropdown menu, dan lain-lain. Untuk lebih lengkapnya, coba lihat halaman demo tutorial ini:
Simple Photo Slide Caption Menggunakan jQuery
03 February 2011
[...] relative + absolute positioning [...]
Sliding Dropdown Menu Menggunakan jQuery
03 February 2011
[...] menu tidak sesulit yang dikira. Anda tidak butuh plugin jQuery atau trik-trik rumit lainnya. Cukup relative – absolute positioning, display:none dan efek standar [...]