Properti position di CSS menentukan bagaimana sebuah elemen ditempatkan di dalam alur dokumen. Tanpa memahami properti ini, kamu akan kesulitan membuat navbar tetap di atas saat halaman digulir, tooltip yang mengikuti kursor, atau badge notifikasi di sudut kartu. Panduan ini membahas lima nilai position dan cara menggunakannya lewat langkah praktis.
Memahami Alur Normal dan Properti Position
Secara bawaan, elemen HTML mengalir dari atas ke bawah mengikuti urutan di markup. Setiap elemen block mengambil lebar penuh kontainernya, sementara elemen inline mengalir mengikuti teks di sekitarnya. Alur ini disebut normal flow, dan properti position memungkinkan kamu keluar dari alur tersebut ketika diperlukan.
Lima nilai position yang perlu kamu kuasai adalah static, relative, absolute, fixed, dan sticky. Setiap nilai mengubah cara elemen dihitung posisinya dan memengaruhi apakah properti top, right, bottom, dan left akan berlaku.
Langkah 1: Kenali Nilai Static sebagai Titik Awal
Semua elemen memakai position: static secara default. Pada nilai ini, properti top, right, bottom, dan left tidak berpengaruh sama sekali. Elemen mengikuti normal flow persis seperti yang ditulis di HTML.
.kotak {
position: static;
}Kamu jarang menulis static secara eksplisit karena ini nilai bawaan. Namun, mengetahui bahwa static adalah kondisi awal membantu memahami kapan sebuah elemen bisa diposisikan relatif terhadap elemen lain.
Langkah 2: Pakai Relative untuk Pergeseran Halus
Nilai relative membuat elemen tetap menempati ruang di normal flow, tetapi kamu bisa menggesernya dengan top, right, bottom, dan left. Ruang aslinya tetap dipertahankan sehingga elemen lain tidak bergerak mengisi celahnya.
.badge {
position: relative;
top: 4px;
left: 8px;
}Relative juga sering dipakai sebagai kontainer acuan untuk elemen absolute di dalamnya. Pola ini muncul di hampir semua komponen UI, mulai dari dropdown menu sampai kartu produk dengan tombol hapus di sudut kanan atas.
Kalau kamu baru mulai menyusun halaman, menggabungkan teknik ini dengan 7 Langkah Belajar CSS Flexbox untuk Layout Web akan mempermudah pengaturan elemen dalam satu baris atau kolom.
Langkah 3: Gunakan Absolute dengan Kontainer Relative
Elemen dengan position: absolute keluar dari normal flow dan diposisikan relatif terhadap leluhur terdekat yang memiliki posisi selain static. Jika tidak ada, acuannya adalah viewport atau elemen root.
.kartu {
position: relative;
}
.kartu .hapus {
position: absolute;
top: 8px;
right: 8px;
}Pola relative pada induk dan absolute pada anak adalah cara paling umum untuk menempatkan elemen di sudut tertentu. Tanpa induk yang relative, elemen absolute akan menempel ke halaman, dan hasilnya berantakan saat kontainer digeser.
Mengatur Urutan Tumpukan dengan z-index
Elemen yang keluar dari normal flow bisa saling menimpa. Properti z-index mengatur urutan tumpukan, tetapi hanya berlaku pada elemen yang sudah diposisikan (bukan static). Nilai lebih besar tampil di atas elemen bernilai lebih kecil.
.dropdown {
position: absolute;
z-index: 10;
}Langkah 4: Terapkan Fixed untuk Elemen yang Selalu Terlihat
Nilai fixed memposisikan elemen relatif terhadap viewport, bukan terhadap halaman. Elemen ini tidak bergerak saat halaman digulir. Header yang menempel di atas, tombol chat di kanan bawah, dan notifikasi yang muncul di pojok layar termasuk contoh umum pemakaian fixed.
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}Karena elemen fixed keluar dari alur, tambahkan padding-top pada konten utama supaya bagian atas tidak tertutup navbar. Ini kesalahan yang paling sering muncul saat pertama kali memakai fixed.
Langkah 5: Manfaatkan Sticky untuk Elemen yang Mengikuti Guliran
Sticky adalah kombinasi relative dan fixed. Elemen berperilaku relative selama masih di dalam area kontainernya, lalu berhenti di posisi tertentu saat digulir.
.judul-bagian {
position: sticky;
top: 16px;
}Agar sticky bekerja, elemen harus berada di dalam kontainer yang lebih tinggi darinya dan memiliki nilai top, right, bottom, atau left. Kalau properti itu tidak diisi, elemen akan berperilaku seperti relative biasa.
Saat menggabungkan beberapa pola posisi dalam halaman responsif, pendekatan dari Cara Membuat Layout Responsive dengan CSS Grid untuk Pemula bisa jadi acuan awal sebelum menyempurnakan detail posisi elemen.
Ringkasan Perbedaan Lima Nilai Position
| Nilai | Keluar dari alur | Acuan posisi | Contoh pemakaian |
|---|---|---|---|
| static | Tidak | Alur normal | Elemen teks biasa |
| relative | Tidak | Posisi asalnya | Pergeseran kecil, kontainer acuan |
| absolute | Ya | Leluhur terdekat yang berposisi | Badge, tooltip, dropdown |
| fixed | Ya | Viewport | Navbar, tombol chat |
| sticky | Sebagian | Viewport lalu kontainer | Judul bagian, header tabel |
Untuk mengingat perbedaan ini, mulailah dari pertanyaan sederhana: apakah elemen perlu tetap menempati ruangnya di halaman? Kalau ya, pilih relative atau sticky. Kalau tidak, pilih absolute atau fixed.
Kesalahan Umum saat Memakai Position
- Memakai absolute tanpa induk yang relative sehingga elemen menempel ke halaman.
- Lupa menambahkan padding kompensasi setelah memakai fixed pada navbar.
- Memberi z-index pada elemen static yang tidak berpengaruh apa pun.
- Memakai sticky pada kontainer yang tingginya sama dengan elemen itu sendiri.
- Menumpuk position bersarang tanpa alasan jelas sampai sulit dilacak.
Untuk proyek yang melibatkan banyak referensi kode dan artikel teknis, menyimpan tautan yang sering dipakai lewat aplikasi bookmark terbaik untuk kurasi konten bisa menghemat waktu saat kembali mencari solusi yang pernah kamu temukan.
Latihan yang paling efektif adalah membuat satu halaman kecil berisi navbar fixed, kartu dengan badge absolute, dan judul bagian sticky. Gabungkan ketiganya dalam satu file HTML, lalu ubah satu properti demi satu untuk melihat perubahan perilakunya. Sama seperti memilih antara teleskop refraktor atau reflektor untuk pemula, setiap nilai position punya situasi yang paling cocok.
Pertanyaan yang Sering Diajukan
Apa perbedaan utama position relative dan absolute?
Relative tetap mempertahankan ruang elemen di alur normal dan menggeser tampilan relatif terhadap posisi aslinya. Absolute mengeluarkan elemen dari alur sehingga elemen lain mengisi ruangnya, dan posisinya dihitung dari leluhur terdekat yang berposisi.
Kenapa position sticky saya tidak berfungsi?
Periksa dua hal: apakah properti top, bottom, left, atau right sudah diisi, dan apakah kontainer induknya cukup tinggi. Sticky hanya bertahan selama elemen masih berada di dalam area kontainernya, jadi kontainer yang setinggi elemen akan membuat efeknya tidak terlihat.
Apakah position fixed mengganggu tampilan di layar kecil?
Bisa, terutama kalau elemen fixed menutupi sebagian besar lebar layar. Batasi tinggi atau lebar elemen fixed, dan uji di beberapa ukuran viewport. Untuk navbar, pertimbangkan menyembunyikan menu di layar kecil dan menampilkannya lewat tombol.
