Tutorial Lengkap Memahami CSS Position

Transkripsi

1

2 Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static, relative, absolute, atau fixed? Kali ini kita akan bahas satu persatu beserta keunikannya masing-masing. Yuk simak biar tambah ngerti.. :D Salam sobat Jagocoding.. Kali ini izinkan saya share salah satu tutorial yang fokus ke salah satu property CSS yang bisa jadi masih bikin kita bingung,, yaitu CSS Position. Sayapun butuh waktu yang cukup lama untuk bisa memahami perbedaan dan kegunaan CSS Position dengan tepat.. Langsung disimak aja ya.. :D 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. Langsung dimulai dari static aja ya,, 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> <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*/

3 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.. :P 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 : <!--Kode yang tadi dilanjutin..--> <! >

4 <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 nih...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) ^_^'a :

5 Jadi disini terlihat satu keunikan position:relative ya,, 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! :D 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 2 position 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 seenak jidat kita.. :D Sama seperti position:relative, position:absolute ini dibarengi dengan property 4 arah (top, left, right, bottom). Akan tetapi bedanya kalau di position relative titik 0pxnya 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.. <!--Tag-tag lama tadi...--> <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 :

6 "Hmm,, ada yang aneh.. perasaan tag HTMLnya ada 2 div deh,, kok yang muncul cuma 1?" Yah,, 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 : <!--Tag HTML tadi dibiarkan--> <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 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 kasi 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 :

8 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 nol 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

9 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. Saya pernah buat tutorial yang menggunakan implementasi dari position fixed ini, yaitu di tutorial Membuat Layout Fix Header. Position:fixed ini juga sering kita temukan di facebook / twitter yang headernya diam di tempat. Untuk mengerti konsepnya, kita buat HTMLnya seperti ini : <!--HTML yang tadi-->... <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

10 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. Semoga artikel ini membantu kita memahami penggunaan position dengan baik.. :) Tentang Penulis Christian Rosandhy