Materi kali ini, saya kira tingkat kesulitannya lumayan meningkat dari pada materi-materi yang sudah kita pelajari sebelumnya. Pastikan betul-betul memperhatikan dengan teliti agar lebih mudah untuk dipahami. Baik, kita langsung saja ke pembahasan mengenai CSS Layouting yaitu CSS Position.
Apa itu Position?
Position merupakan properti pada CSS untuk membuat posisi sebuah elemen seolah berada pada dimensi yang berbeda. Elemen yang diberi properti position akan keluar dari flow normalnya. Dengan itu, kita bisa lebih bebas mengatur posisi sebuah elemen tanpa mempengaruhi atau memperdulikan elemen yang lainnya. Semoga kalian masih ingat mengenai pembahasan tentang Normal Flow dan Out of Flow pada materi Float.
Apa saja value/nilai pada Position?
Ada 4 nilai yang bisa kita berikan pada CSS Position.
- Static
- Relative
- Absolute
- Fixed.
Setiap nilai selain static seperti relative, absolute dan fixed, untuk merubah posisinya dapat menggunakan properti top, right, bottom, dan left. Penjelasan lebih detail akan dijelaskan di masing-masing pembahasan.
Position Static.
Static merupakan nilai default pada Position. Jadi sebelum elemen diberi Position, defaultnya adalah static. Penulisan kodenya seperti di bawah ini.
position: static;
Position Relative.
Seperti pada definisi mengenai CSS Position tadi, pada Position Relative ketika diberi properti top, right, bottom, dan left, ruang yang di tempati oleh elemen tersebut masih ada. Karena elemen yang diberi Position Relative akan bergerak relatif terhadap posisi semulanya. Agar lebih jelas, buatlah sebuah file HTML lalu isi dengan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Position (Relative)</title>
<style>
div{
width: 150px;
height: 150px;
}
.kotak-1{
background-color: lightblue;
}
.kotak-2{
background-color: lightgreen;
position: relative;
}
.kotak-3{
background-color: salmon;
}
</style>
</head>
<body>
<div class="kotak-1"></div>
<div class="kotak-2"></div>
<div class="kotak-3"></div>
</body>
</html>
Pada contoh di atas, kotak-2 mempunyai position dengan nilai relative. Coba save lalu lihat hasilnya. Tampak sepertinya tidak ada yang berubah, namun sebenarnya ada yang berubah. Pada elemen yang diberi Position seperti penjelasan di atas tadi, elemen tersebut seolah berada pada dimensi yang berbeda dari elemen lainnya. Jadi sebenarnya, kotak-2 dimensinya sekarang berada pada posisi paling depan. Ilustrasinya seperti gambar di bawah ini.
.kotak-2{
background-color: lightgreen;
position: relative;
top: 40px;
}
Save lalu lihat hasilnya. Kotak-2 akan membuat jarak 40px keatas dan menutupi kotak-3 di bawahnya karena pada Position tidak akan memperdulikan elemen lainnya. Berbeda dengan tanpa menggunakan position, ketika kita beri margin-top pada kotak-2 sebesar 40px maka elemen di bawahnya juga ikut bergeser kebawah. Sedangkan ketika menggunakan Position, kotak-3 tetap pada tempatnya.
Pada Position dengan nilai relative, saat diberi properti top, right, bottom, dan left dengan nilai 0, maka posisinya akan kembali ke posisi semula. Itu karena elemen yang diberi Position Relative akan bergerak relatif terhadap posisi semulanya. Namun kasus ini menjadi berbeda pada beberapa nilai Position yang akan kita bahas selanjutnya.
Position Absolute
Berbeda dengan relative, Position Absolute akan membuat elemen menjadi lebih bebas bergerak dan menentukan posisi. Karena setiap elemen yang diberi properti Position Absolute akan dianggap tidak ada oleh elemen-elemen lainnya. Maka dari itu, dengan Position Absolute kita bisa lebih bebas menentukan posisi tanpa terpaku oleh apapun. Agar lebih mudah dipahami, buatlah sebuah file HTML lalu isi dengan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Position (Absolute)</title>
<style>
div{
width: 150px;
height: 150px;
}
.kotak-1{
background-color: lightblue;
}
.kotak-2{
background-color: lightgreen;
position: absolute;
}
.kotak-3{
background-color: salmon;
}
</style>
</head>
<body>
<div class="kotak-1"></div>
<div class="kotak-2"></div>
<div class="kotak-3"></div>
</body>
</html>
Pada contoh di atas. Kotak-2 mempunyai properti Position dengan nilai Absolute. Coba save lalu lihat hasilnya. Terlihat kotak-3 yang mempunyai warna salmon menjadi hilang. Sebenarnya kotak-3 bukan hilang, akan tetapi ia naik ke atas mengisi tempat kotak-2. Karena kotak-2 diberi Position Absolute, maka elemennya dianggap tidak ada dan tempatnya akan ditempati oleh elemen di bawahnya. Namun hanya saja posisinya ketutupan oleh kotak-2. Mengapa begitu? Seperti penjelasan mengenai Position, kotak-2 sekarang berada pada dimensi yang berbeda dari elemen-elemen lainnya. Ilustrasinya hampir sama seperti pada gambar di pembahasan Position Relative.
Sekarang perbedaannya dengan Position Relative, coba kalian beri properti top dengan nilai 40px pada kotak-2 tadi. Maka hasilnya posisi dari si kotak-2 akan berada pada jarak 40px ke atas pada body dari halaman browsernya. Pada Position Relative, jarak 40px ke atas adalah di ambil dari jarak ke atas dengan elemen di atasnya. Namun pada Position Absolute, karena ia sudah tidak menganggap dan tidak memperdulikan elemen lainnya, maka yang menjadi acuan untuk posisi adalah body atau window pada halaman browsernya.
Di antara penyebab kejadian di atas tadi adalah karena elemen yang diberi Position Absolute tidak akan memperdulikan posisi awalnya. Terbukti jika seandainya kita beri properti top dengan nilai 0, maka posisinya bukan kembali ke posisi semula, melainkan berada di pojok kiri atas dari body halaman pada browser.
Untuk penerapan pada website, biasanya Position Absolute ini yang paling sering digunakan dari pada Position yang lain. Karena kita bisa dengan bebas mengatur posisi sebuah elemen tanpa terpaku oleh apapun. Sedangkan Position Relative, biasanya digunakan untuk menjadi parent dari si elemen yang memilki Position Absolute. Tujuannya adalah agar lebih mudah mengatur posisinya nanti. Jangan khawatir jika belum paham. Saya akan coba membuat contoh kasus yaitu membuat sebuah navbar.
Navbar yang kita buat sama persis seperti navbar yang sudah pernah dibuat pada materi mengenai Box Model. Namun karena pada materi Box Model belum dijelaskan tentang Position, jadi penjelasannya akan dijelaskan pada materi kali ini. Kode HTML dan CSSnya kurang lebih seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Position (Membuat Navbar)</title>
<style>
*{
margin: 0;
padding: 0;
}
.clear{
clear: left;
}
header{
background-color: blue;
width: 100%;
height: 60px;
border-bottom: 3px solid green;
}
.navbar{
position: relative;
width: 90%;
margin: auto;
}
.navbar h1{
float: left;
line-height: 60px;
color: white;
}
nav ul{
position: absolute;
right: 0px;
}
nav ul li{
list-style: none;
display: inline-block;
font-size: 20px;
padding: 0 0 0 20px;
line-height: 60px;
color: white;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<h1>Judul Web</h1>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</body>
</html>
Dan hasilnya seperti di bawah ini.
Seharusnya yang menjadi pertanyaan sekarang kenapa si <ul> yang mempunyai Position Absolute dan mempunyai properti right dengan nilai 0 posisinya tidak berada di paling kanan pada body dari halaman browsernya. Menurut penjelasan di awal, seharusnya yang terjadi seperti itu. Mari kita bahas lebih detail.
Hal tersebut terjadi karena pada kode di atas, dipertemukan dua elemen yang sama-sama mempunyai Position. Jadi sekarang ada dua elemen yang seolah berada pada dimensi yang berbeda. Elemen tersebut adalah <ul> dengan nilai absolute dan parentnya yaitu <div> dengan class navbar yang mempunyai nilai relative. Sekarang ke dua elemen tersebut berada pada dimensi yang berbeda dan posisnya menjadi sama di dimensi yang berbeda tersebut.
Karena sekarang <ul> yang mempunyai nilai absolute mempunyai parent dengan nilai relative, maka sekarang posisi acuan dari <ul> bukan lagi body halaman browser melainkan parentnya sendiri yang mempunyai nilai relative. Jika seandainya nilai relative dihapus dari si parent tadi, otomatis acuan posisi dari <ul> akan berubah bukan parentnya lagi melainkan seperti semula yaitu body atau window dari halaman browser.
Itulah contoh kasus yang biasa dilakukan saat menggunakan Position Relative dan Absolute. Lebih lengkapnya kita akan terapkan kasus tadi di part 5 nanti yaitu penerapan dari semua materi yang sudah dipelajari.
Position Fixed.
Pembahasan Terakhir adalah Position Fixed. Position Fixed saya kira merupakan pembahasan yang mudah untuk dipahami. Sesuai artinya, dengan memberikan nilai fixed pada elemen, otomatis elemennya akan menjadi diam meskipun discroll. Seperti biasa agar penjelasannya lebih mudah dipahami, buatlah sebuah file html lalu isi dengan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Position (Fixed)</title>
<style>
body{
height: 2000px;
}
div{
width: 150px;
height: 150px;
}
.kotak-1{
background-color: lightblue;
position: fixed;
}
.kotak-2{
background-color: lightgreen;
}
.kotak-3{
background-color: salmon;
}
</style>
</head>
<body>
<div class="kotak-1"></div>
<div class="kotak-2"></div>
<div class="kotak-3"></div>
</body>
</html>
Untuk <body> saya sengaja beri tinggi 2000px agar halamannya bisa discroll. Coba save lalu lihat hasilnya. Ketika discroll, kotak-1 tetap diam berada di tempatnya. Namun seperti biasa, elemen yang di bawahnya akan naik keatas karena Properti Position membuat elemen keluar dari flow normalnya. Untuk mengakali itu biasanya pada elemen di bawahnya diberi margin-top sesuai tinggi dari elemen yang diberi Position Fixed tersebut supaya nanti elemennya bisa kelihatan.
Pada fixed, saat diberi properti top, right, bottom, dan left perilakunya sama seperti absolute. Acuan posisinya adalah body dari halaman. Misal jika kita ingin membuat kotak-1 fixed atau diam di bawah, tinggal beri properti bottom dengan nilai 0 dan begitu seterusnya seperti pembahasan-pembahasan di awal tadi. Namun bedanya, Position Fixed tidak bergantung atau mengacu kepada posisi parent yang sudah diberi Position. Meskipun misalnya jika sebuah elemen yang memiliki Position Fixed mempunyai parent elemen dengan nilai relative, maka yang menjadi acuan posisinya tetap body atau window pada browser.
Position Fixed ini biasanya sering digunakan ketika ingin membuat navbar diam saat discroll. Seperti pada website Facebook, navbarnya diam saat discroll. Dan masih banyak kegunaan lain dari Position Fixed ini tergantung dari kebutuhan yang diinginkan.
Demikian penjelasan mengenai CSS Position pada CSS Layouting. Sudah sangat panjang sekali artikelnya, semoga membuat kalian tidak bosan untuk membaca dari awal hingga akhir. Karena memang sengaja saya buat panjang artikelnya berhubung banyak sekali pembahasan penting yang harus dijelaskan.
Selanjutnya adalah Part terakhir dari pembahasan CSS Layouting ini yaitu penerapan dari semua materi yang sudah dipelajari dari part pertama sampai sekarang. Di part terakhir nanti, penerapannya adalah membuat website dengan layout atau tampilan yang sering digunakan oleh para Developer Web. Seperti navbar fixed, jumbotron, konten/main, sidebar dan lain sebagainya.
Saya harap sebelum benar-benar lanjut ke part akhir, sebaiknya semua materi mengenai CSS Layouting ini bisa dipahami dengan baik dan benar. Karena nati saya tidak akan banyak mengulang jika penjelasannya sudah dijelaskan pada materi-materi yang telah lalu.
Sekian semoga artikelnya bermanfaat. Terimakasih sudah membaca.
