Properti position di CSS adalah salah satu yang paling sering membingungkan bagi pemula. Memahami perbedaan antara relative, absolute, fixed, dan sticky sangat penting karena masing-masing berperilaku sangat berbeda. Artikel ini menjelaskan setiap nilai dengan contoh nyata agar mudah dipahami.
Nilai-nilai Properti Position
CSS memiliki lima nilai untuk properti position:
static— nilai default, mengikuti alur normal dokumenrelative— digeser relatif terhadap posisi normalnyaabsolute— diposisikan relatif terhadap ancestor yang ber-positionfixed— diposisikan relatif terhadap viewport (jendela browser)sticky— kombinasi relative dan fixed
Properti top, right, bottom, dan left digunakan bersama position (kecuali static) untuk mengatur offset posisi elemen.
position: static (Default)
Ini adalah nilai default setiap elemen. Elemen mengikuti alur normal dokumen HTML dan tidak terpengaruh oleh top, right, bottom, atau left.
.elemen {
position: static; /* default, tidak perlu ditulis */
}position: relative
Elemen tetap berada di alur normal dokumen, tetapi bisa digeser dari posisi aslinya. Ruang yang ditempati elemen di alur normal tetap dipertahankan (tidak hilang).
.kotak-relative {
position: relative;
top: 20px; /* geser 20px ke bawah dari posisi asli */
left: 30px; /* geser 30px ke kanan dari posisi asli */
background: #dbeafe;
padding: 16px;
}Penting: position: relative juga berfungsi sebagai anchor (jangkar) bagi elemen anak yang ber-position: absolute.
position: absolute
Elemen dikeluarkan dari alur normal dokumen (elemen lain tidak memperhitungkan keberadaannya). Posisinya ditentukan relatif terhadap ancestor terdekat yang memiliki position selain static. Jika tidak ada, akan relatif terhadap <html>.
<div class="induk">
<div class="anak-absolute">Badge</div>
<p>Ini konten induk</p>
</div>
<style>
.induk {
position: relative; /* jangkar untuk elemen absolute */
background: #f0fdf4;
padding: 20px;
width: 200px;
}
.anak-absolute {
position: absolute;
top: 8px;
right: 8px;
background: #ef4444;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
}
</style>Contoh ini adalah pola yang sangat umum: menempatkan badge/label di sudut kartu.
position: fixed
Elemen diposisikan relatif terhadap viewport (jendela browser), bukan dokumen. Elemen tetap berada di tempat yang sama meski halaman di-scroll. Dikeluarkan dari alur normal dokumen.
.navbar-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #1e293b;
color: white;
padding: 16px 32px;
z-index: 100;
}
/* Tambahkan padding-top pada body agar konten tidak tertutup navbar */
body {
padding-top: 60px;
}Contoh Fixed: Tombol Scroll to Top
<button class="btn-top" onclick="window.scrollTo(0,0)">⇧ Atas</button>
<style>
.btn-top {
position: fixed;
bottom: 24px;
right: 24px;
background: #3b82f6;
color: white;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
</style>position: sticky
Elemen berperilaku seperti relative sampai mencapai posisi tertentu saat scroll, lalu "menempel" seperti fixed. Sangat berguna untuk header tabel atau navigasi yang menempel saat scroll.
.header-tabel {
position: sticky;
top: 0;
background: #1e293b;
color: white;
z-index: 10;
}
.sidebar-menempel {
position: sticky;
top: 80px; /* menempel 80px dari atas viewport */
align-self: flex-start;
}Ringkasan Perbandingan
- static — posisi normal, tidak bisa digeser dengan top/left/right/bottom
- relative — digeser dari posisi aslinya, tetap di alur normal, bisa jadi jangkar untuk absolute
- absolute — keluar dari alur normal, posisi relatif terhadap ancestor ber-position
- fixed — keluar dari alur normal, posisi relatif terhadap viewport, tidak bergerak saat scroll
- sticky — gabungan relative dan fixed, menempel saat di-scroll melewati titik tertentu
Properti z-index
Saat elemen di-position (bukan static), kamu bisa menggunakan z-index untuk mengatur tumpukan elemen mana yang tampil di atas:
.modal {
position: fixed;
z-index: 1000;
}
.overlay {
position: fixed;
z-index: 999;
}
.navbar {
position: fixed;
z-index: 100;
}Kesimpulan
Memahami properti position CSS adalah kunci untuk menguasai tata letak web. Ingat rumusnya: gunakan relative sebagai jangkar, absolute untuk elemen yang mengambang di dalam container, fixed untuk elemen yang selalu terlihat di layar, dan sticky untuk elemen yang menempel saat di-scroll. Dengan memahami perbedaan ini, kamu bisa menyelesaikan hampir semua tantangan positioning dalam web development.
