Tutorial Lengkap Memahami Css Position

Daftar Isi

Tutorial Lengkap Memahami Css Position

Tutorial Lengkap Memahami Css Position - Aseprohimatea seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu udah punya nilai position:static.

POSITION:STATIC

Position:static itu adalah tipe posisi paling normal yang mengalir begitu aja. Dalam jumlah yang banyak, tag tipe display block dengan position static akan terus mengalir ke bawah, sedangkan tag tipe display inline akan terus mengalir ke samping seperti biasa.

Contoh:

<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*/
}

Inilah hasil tampilan position:static;

Sayangnya position:static ini punya kelemahan, position static tidak mempunyai sifat container yang bisa menampung position:absolute didalamnya dengan baik. Sehingga position:static ini biasanya hanya digunakan di tag-tag yang tidak mempunyai anak lagi. Maksudnya apa? Nanti dijelaskan di bawah.

POSITION:RELATIVE

Position:relative adalah jenis position yang paling banyak digunakan. Memiliki sifat yang sama dengan position:static yang mengalir, akan tetapi perbedaannya position:relative ini bisa mengatur posisinya dengan bantuan property top, left, right, bottom. Patokan property keempat arah tersebut adalah item itu sendiri. Sehingga misalnya item dengan position:relative diberi property top:50px berarti memberikan jarak kosong 50px diatas item tersebut. Sekarang masih di file HTML yang sama kita tambahkan :

<br>
<br>

<h2>Display Relative</h2>
<div class="relative">block</div>

.relative{
width:100px;
height:125px;
background:#cf0;
position:relative;
}

Hasilnya nanti akan sama saja seperti display:static, tidak ada yg istimewa. Hanya muncul sebuah div lagi dibawahnya yang terus mengalir ke bawah. Perbedaannya baru terlihat ketika kita menambahkan di CSSnya property ini.

.relative{
/*css yang tadi*/
...

/*top / left / right / bottom dengan nilai sembarangan*/
top:50px;
left:200px;
}

Perbandingan position:relative tanpa property arah dan dengan tambahan property arah seperti ini (semoga gambarnya bisa dimengerti)

Jadi disini terlihat satu keunikan position:relative, sekalipun position:relative ini sama-sama mengalir seperti display:static, tapi position:relative ini bisa diatur juga posisinya dengan property 4 arah tersebut. Dan keunikan lagi 1, position:relative ini memiliki sifat container artinya dapat menampung tag dengan position:absolute dengan baik. Sehingga, position:relative ini sangat cocok digunakan untuk tag-tag yang masih memiliki anak lagi. Untuk lebih jelasnya, perhatikan di poin position:absolute sekarang ini !

POSITION:ABSOLUTE

position:absolute ini adalah jenis posisi yang fungsinya paling powerful. Berbeda dengan position:static dan position:relative yang terus mengalir, position:absolute ini cenderung tidak mengisi ruangan seperti 2bposition lainnya, dan diam ditempat jika beberapa tag dengan
position:absolute ini berbarengan. Wajar saja, karena fungsi position:absolute sendiri adalah meletakkan item dengan posisi yang bisa diatur semaunya kita.

Sama seperti position:relative, position:absolute ini dibarengi dengan property 4 arah (top, left, right, bottom). Akan tetapi bedanya kalau di position relative titik 0px nya adalah item itu sendiri (lihat gambar diatas), sedangkan di position:absolute ini titik 0pxnya adalah layer yang bersifat container yang ada di parentnya, atau kalau tidak ada layer container sama sekali, maka pojokkan browser sendiri lah yang menjadi titik 0pxnya. Untuk lebih jelasnya, kita buatkan juga dibawah
proyek HTML kita.

<br>
<br>

<h2>Display Absolute</h2>
<div class="absolute">block</div>
<div class="absolute">block</div>

.absolute{
position:absolute;
width:100px;
height:125px;
background:#f00;
}

Hasilnya nanti seperti ini :

Perasaan tag HTMLnya ada 2 div deh,, kok yang muncul cuma 1 itulah position:absolute. Karena position:absolute tidak mengalir seperti position:static dan relative. Sekarang kita akan melihat hubungan position:absolute dengan layer container yang tidak lain adalah layer dengan position:relative; pertama-tama kita lanjutkan dulu tag HTML kita seperti ini :

<br>
<br>
<br>
<br>
<br>
<br>

<h2>Display Absolute didalam Relative</h2>
<div class="relative2">
<div class="absolute2">

</div>
</div>

Sekarang kita membuat 2 layer dengan position yang berbeda. Position yang diluar (parent) sebagai relative, dan position didalam (child) sebagai absolute. Kita coba buat terlebih dulu CSSnya seperti ini:

.relative2{
position:relative;
/*lebar dan tinggi bebas aja, tapi dibuat agak besar */
width:500px;

7
height:300px;
background:#ccc;
}
.absolute2{
position:absolute;
width:200px;
height:100px;
background:#000;
}

Nah, hasilnya nanti seperti ini :

Sampai disini position:absolute hasilnya masih biasa-biasa aja ya. Sekarang biar perbandingannya

jelas, kita beri property arah di layer .absolute2 itu, jadi seperti ini :

.absolute2{
/*CSS yang tadi*/
...
right:100px;/*<-- Ini nih yang bantu kita lihat perbedaannya*/
}

Hasilnya nanti seperti ini :

right:100px; pada layer dengan position:absolute akan membuat layer tersebut berjarak 100px dari kanan container. Karena dalam hal ini layer parent (.relative2) bertindak sebagai container, maka 100px dari kanan tersebut dihitung mulai dari titik merah seperti di gambar.

Bagaimana kalau layer .relative2 tersebut tidak diberikan position apapun alias static? Coba saja kita hapus position:relative; di layer .relative2, dan hasilnya akan menjadi seperti ini:

Seperti yang kita lihat, karena layer .relative2 tidak lagi bertindak sebagai container sejak position:relativenya dihapus. Karena itulah position:absolute dapat membuat item tersebut keluar dari layer static ketika diberikan property arah (top, right, bottom, left),, dan ujung browser itu sendiri yang menjadi patokan titik 0 seperti yang kita lihat pada gambar. Tentunya hal ini mengganggu layout kita, karena itu memang sebaiknya position:absolute itu digunakan hanya didalam tag yang bersifat relative supaya posisi lebih rapi dan mudah diatur.

Sama seperti position:relative, position absolute ini juga punya sifat container, sehingga layer dengan position:absolute masih bisa menampung layer absolute lain didalamnya dengan rapi.

POSITION:FIXED

Nah, sekarang kita masuk ke jenis position terakhir yang paling unik dan nggak mungkin ketuker-tuker dengan position yang lain. Position:fixed ini memungkinkan kita meletakkan elemen secara permanen di suatu titik yang tetap diam sekalipun kita ngescroll browser kita sampe manapun. Position:fixed ini juga sering kita temukan di facebook/twitter yang headernya diam di tempat. Untuk mengerti konsepnya, kita buat HTMLnya seperti ini :

....
<br>
<br>

<h2>Display Fixed</h2>
<div class="fixed"></div>

.fixed{
position:fixed;
width:500px;
height:100px;
background:#ffcc00;
top:50px; /*50px dari atas browser*/
left:200px; /*200px dari kiri browser*/
}

Sekarang kita lihat hasilnya,,

Nah, itu dia keunikan position:fixed. Sebagai catatan, position:fixed ini juga bersifat container, sehingga layer didalamnya tersebut masih bisa menampung position:absolute dengan baik.

Kesimpulan

Kesimpulan terakhirnya sederhana, masing-masing position punya keunikannya masing-masing, yang digunakan sesuai kebutuhan kita. Kalau kita butuh layer yang peletakannya mengalir yang nggak perlu bersifat container, gunakan STATIC. Kalau kita mau layer yang peletakannya mengalir dan bersifat container, gunakan RELATIVE. Kalau mau layer yang nggak perlu mengalir dan letaknya seenak jidat, gunakan ABSOLUTE. Dan kalau butuh layer yang diam di tempat dalam keadaan apapun, gunakan FIXED.

Aseprohimatea

Search Suggest

Tutorial Lengkap Memahami Css Position