CSS itu dunia yang sangaaat luas untuk dipelajari. Justru karena begitu luasnya kadang-kadang kita kurang menguasai dasar-dasarnya yang begitu penting. Positioning CSS ini adalah salah satu yang umumnya paling sulit dimengerti pengguna CSS, bahkan pengguna expert sekalipun. Karena itu hari ini saya ingin membagikan pengenalan yang lebih dalam dari masing-masing nilai position di CSS. Cekidot~
1. POSITION:STATIC;
Position static adalah nilai default dari sebuah position. Nggak ada yang istimewa dari position ini, intinya obyek yang diberikan position static itu hanya mengalir seperti biasa. Like nothing happened gitu deh..
<h1>Display Static</h1>
<div class="static">block</div>
<div class="static">block</div>
<div class="static">block</div>
<br>
<br>
<span class="static">inline</span>
<span class="static">inline</span>
<span class="static">inline</span>
.static{
width:100px;
height:125px;
background:#0cf;
margin:10px;
/*POSITION:STATIC tidak perlu dibuat, karena secara defaultnya sudah static*/
}
2. POSITION:RELATIVE
Position relative adalah position yang sangat umum digunakan. Mirip seperti position static yang hanya mengalir begitu saja, tapi bedanya objek dengan position:relative bisa diberikan perintah jarak top, left, right, dan bottom, sedangkan position static nggak bisa. Misalnya objek position relative diberikan top 20px, artinya posisi objek tersebut adalah ada jarak 20px dari posisi yang seharusnya.
<h2>Display Relative</h2>
<div class="relative">block</div>
.relative{
width:100px;
height:125px;
background:#cf0;
position:relative;
top:50px;
left:200px;
/*akan ada jarak 50px dari atas, dan 200 px dari samping di posisi yang seharusnya*/
}
Selain itu, position:relative memiliki keunikan lain adalah memiliki sifat container sehingga mampu menjadi objek penampung / container, sehingga bisa diisi objek-objek lainnya didalam dirinya. Karena keunikan ini, position:relative sangat cocok diaplikasikan pada sebuah layer penampung, agar dapat menampung objek didalamnya dengan baik. Untuk kasus yang ini mungkin akan lebih jelas dibahas di poin bawah ya..
3. POSITION:ABSOLUTE
Nah, ini adalah position yang paling powerful dalam CSS. Position Absolute dapat dibilang position yang paling seenak jidat. Berbeda dengan position static dan relative yang mengalir, position absolute sama sekali tidak mengalir ke bawah, dan hanya diam di satu titik, dimana objek tersebut dipanggil. Jadi kalau ada 2 objek dengan position:absolute dipanggil bersamaan seperti contoh ini jadinya begini deh..
<h2>Display Absolute</h2>
<div class="absolute">block</div>
<div class="absolute">block</div>
.absolute{
position:absolute;
width:100px;
height:125px;
background:#f00;
}
Kalau kita lihat di gambar, kenapa objeknya cuma ada 1? Kan kita membuatnya 2? Itulah position absolute, sama sekali tidak mengalir, dan akan diam di titik itu saja. Karena itu, position:absolute ini biasanya diimbangi dengan CSS jarak seperti top, left, right, dan bottom seperti relative, akan tetapi jarak tersebut dihitung dari container obyek yang bersangkutan. Seperti yang dibahas di poin 2 tadi, position:relative adalah position yang mempunyai sifat container, sehingga bisa menampung position:absolute ini dengan baik. Biar lebih ngerti lihat contohnya aja ya..
<h2>Display Absolute didalam Relative</h2>
<div class="relative2">
<div class="absolute2">
</div>
</div>
.relative2{
position:relative;
width:500px;
height:300px;
background:#ccc;
}
.absolute2{
position:absolute;
width:200px;
height:100px;
background:#000;
right:100px;
}
Nah, seperti itulah kira-kira, position:relative tadi menjadi batas kerjanya position:absolute.. Hal tersebut nggak akan bisa terjadi kalau position containernya pakai static.. Dan kalau position:absolute dilakukan tanpa ada container sama sekali di parentnya, maka window browser sendiri yang akan langsung menjadi container utamanya.. *ini emang bagian paling susah,, semoga ngerti yah*
4. POSITION:FIXED
Seperti contoh di tutorial sebelumnya https://tianrosandhy.com/blog/tutorial-css-fix-header-membuat-header-diam-di-tempat. Position:fixed adalah posisi yang paling unik diantara semua posisi yang lainnya. Kalau dijelaskan, position:fixed itu adalah position:absolute yang diam menyesuaikan dengan layar. Jadi mau discroll kemanapun, objek dengan position:fixed akan diam di tempat dimana ia dibuat.
KESIMPULAN
Position Static : Position standar dan default. Nggak ada istimewanya, dan nggak perlu dipanggil
Position Relative : Position yang mengalir, tapi bisa diberikan CSS jarak, dan juga bersifat container
Position Absolute : Position yang tidak mengalir, posisi bisa diatur seenaknya
Position Fixed : Position yang diam di tempat, sekalipun websitenya kita scroll kemanapun.
Semoga penjelasannya cukup jelas ya.. Untuk yang ingin lihat source lengkapnya bisa didownload disini.
