Halo teman-teman semuanya, di materi sebelumnya kita sudah belajar tentang properti display dan visibility yang digunakan untuk mengatur tampilan dan keberadaan elemen.
Nah, kali ini kita akan membahas position, properti yang memungkinkan kita mengatur posisi elemen secara presisi di halaman web.
Dengan memahami berbagai jenis position, kita bisa membuat layout yang fleksibel — dari elemen yang menempel di atas layar, hingga elemen yang selalu muncul di pojok halaman.
1. Static (default)
Ini adalah nilai default untuk semua elemen. Elemen akan ditampilkan secara normal sesuai alur dokumen (flow) tanpa bisa dipindahkan menggunakan top, left, dan sebagainya.
div {
position: static;
}
2. Relative
Elemen diposisikan relatif terhadap posisinya semula. Artinya, elemen tetap mengikuti alur dokumen, tapi bisa digeser dengan properti seperti top, left, right, dan bottom.
.box {
position: relative;
top: 20px;
left: 10px;
}
3. Absolute
Elemen akan dikeluarkan dari alur dokumen dan diposisikan relatif terhadap elemen induk terdekat yang memiliki position: relative, atau terhadap <html> jika tidak ada induk yang relative.
.box {
position: absolute;
top: 50px;
left: 100px;
}
4. Fixed
Elemen akan diposisikan relatif terhadap jendela browser dan tidak akan bergerak meskipun halaman di-scroll. Cocok untuk header/menu tetap di atas.
.menu {
position: fixed;
top: 0;
left: 0;
}
5. Sticky
Kombinasi antara relative dan fixed. Elemen akan bergerak mengikuti scroll sampai mencapai posisi tertentu, lalu “menempel” (sticky) di situ.
h2 {
position: sticky;
top: 0;
background: white;
}
Contoh Lengkap
Contoh berikut menunjukkan berbagai jenis posisi elemen menggunakan properti position.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Position CSS</title>
<style>
body {
height: 2000px;
padding: 40px;
font-family: sans-serif;
}
.static {
background-color: #eee;
padding: 10px;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: lightblue;
padding: 10px;
}
.absolute-container {
position: relative;
background-color: #f5f5f5;
height: 150px;
margin-bottom: 30px;
}
.absolute {
position: absolute;
top: 10px;
right: 10px;
background-color: orange;
padding: 10px;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: tomato;
padding: 10px;
color: white;
}
.sticky {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed">Menu Fixed</div>
<h2 class="sticky">Judul Sticky</h2>
<div class="static">Ini posisi static (default)</div>
<div class="relative">Ini posisi relative</div>
<div class="absolute-container">
<p>Container dengan posisi relative</p>
<div class="absolute">Ini posisi absolute</div>
</div>
</body>
</html>
Elemen static tampil seperti biasa. Elemen relative digeser dari posisi aslinya. Elemen absolute ditempatkan di sudut atas kanan dari kontainer.
Elemen fixed selalu terlihat di pojok atas meski halaman digulir. Elemen sticky akan “menempel” di atas layar saat melewati batasnya saat halaman di-scroll.
Kesimpulan
Properti position memungkinkan kita mengontrol posisi elemen secara fleksibel. Gunakan relative untuk penyesuaian kecil, absolute untuk penempatan presisi di dalam kontainer, fixed untuk elemen yang selalu tampak, dan sticky untuk elemen yang menempel saat discroll.
Di materi selanjutnya, kita akan belajar tentang Flexbox, teknik layout modern yang sangat powerful untuk menyusun elemen secara horizontal dan vertikal dengan mudah.
Terima Kasih