CSS Position: Bikin Layout Web Jadi Lebih Dinamis

Pernah kepikiran gimana caranya bikin elemen nempel di pojok, mengambang di tengah, atau ngikut scroll user? Semua itu bisa kamu atur dengan satu properti aja: position di CSS.

CSS position adalah salah satu fondasi penting dalam membangun layout yang fleksibel, dinamis, dan interaktif. Tapi, banyak juga yang masih bingung gimana cara kerjanya, dan kapan harus pakai absolute, fixed, atau sticky.

Tenang, di artikel ini kamu bakal diajak kenalan dengan semua tipe position di CSS, lengkap dengan contoh dan tips penggunaannya. Yuk, kita mulai!

---

Apa Itu CSS Position?

CSS position digunakan untuk menentukan bagaimana elemen ditempatkan dalam halaman web — baik relatif terhadap parent-nya, viewport, atau bahkan posisinya tetap di tempat saat user scroll.

Ada lima nilai utama:

1. static (default)
2. relative
3. absolute
4. fixed
5. sticky

baca juga : MySQL vs PostgreSQL: Mana yang Lebih Cocok Buat Kamu?

---

1. static – Posisi Default

cssSalinEdit.element {
  position: static;
}

Ini adalah nilai default semua elemen. Elemen akan ditampilkan sesuai alur normal dokumen (dari atas ke bawah, kiri ke kanan).

❌ Tidak bisa diatur dengan properti top, left, right, atau bottom.

---

2. relative – Bergerak dari Posisi Asalnya

cssSalinEdit.element {
  position: relative;
  top: 10px;
  left: 20px;
}

Elemen tetap mengambil tempat di alur normal, tapi tampilannya bisa digeser.

✅ Cocok untuk:

• Membuat animasi posisi
• Menjadi patokan posisi untuk elemen absolute di dalamnya

---

3. absolute – Lepas dari Flow, Nempel ke Parent

cssSalinEdit.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

Elemen absolute keluar dari alur dokumen, dan akan diposisikan relatif ke parent terdekat yang punya posisi relative, absolute, atau fixed.

❗ Kalau nggak ada parent yang punya position, dia akan menempel ke body.

✅ Cocok untuk:

• Tooltip, pop-up, modal
• Elemen kecil yang butuh posisi spesifik

---

4. fixed – Selalu Nempel di Layar

cssSalinEdit.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

Elemen fixed menempel langsung ke viewport, alias layar pengguna. Nggak peduli user scroll ke mana, dia tetap nongol di tempat yang sama.

✅ Cocok untuk:

• Header/menu yang selalu muncul
• Tombol “Back to Top”

---

5. sticky – Nempel Saat Discroll

cssSalinEdit.section-title {
  position: sticky;
  top: 0;
}

sticky itu gabungan relative dan fixed. Dia akan scroll bersama halaman sampai mencapai posisi tertentu, lalu menempel seperti elemen fixed.

✅ Cocok untuk:

• Judul section yang nempel saat dibaca
• Navigasi lokal dalam artikel panjang

📌 Catatan: Pastikan parent-nya punya cukup tinggi dan tidak overflow hidden!

---

Perbandingan Singkat

Position	Ikut Flow?	Bisa Diatur Top/Left?	Nempel ke
static	✅ Ya	❌ Tidak	Normal flow
relative	✅ Ya	✅ Bisa	Diri sendiri
absolute	❌ Tidak	✅ Bisa	Parent terdekat yang positioned
fixed	❌ Tidak	✅ Bisa	Viewport
sticky	✅ Ya	✅ Bisa	Viewport (setelah scroll)

baca juga : Mahasiswa Teknik Sipil Universitas Teknokrat Indonesia Dikerahkan Akselerasi Pembangunan Masjid Al Hijrah Kota Baru

---

Pertanyaan yang Sering Ditanyakan

❓ Kenapa absolute nggak muncul di tempat yang saya mau?

Pastikan elemen parent-nya punya position: relative agar jadi referensi posisi absolute.

❓ Boleh nggak pakai fixed untuk semuanya?

Boleh, tapi hati-hati: terlalu banyak elemen fixed bisa ganggu UX (dan bikin susah di HP kecil).

❓ sticky nggak jalan di browser saya?

Cek apakah parent punya overflow: hidden atau height yang terlalu kecil — itu bisa bikin sticky gagal berfungsi.

---

Tips Biar Layout Lebih Dinamis dengan position

✅ Gunakan relative untuk parent agar anak bisa absolute dengan aman
✅ Jangan campur terlalu banyak fixed + absolute tanpa perencanaan
✅ Manfaatkan sticky untuk navigasi yang elegan dan fungsional
✅ Simpan z-index secukupnya agar layer tidak tumpang tindih

penulis : Bagas Reyhan N.