Position CSS

Static, relative, fixed, dan absolute beserta kegunaannya.

Pahami konsepnya

Properti position menentukan bagaimana elemen ditempatkan, dan empat nilainya membentuk tangga kendali. static adalah bawaan: elemen mengalir normal mengikuti dokumen. relative memindahkan elemen relatif terhadap posisi normalnya — offset top/right/bottom/left menggesernya tanpa mengusik unsur lain, yang tetap menghormati tempat asalnya.

fixed melepaskan elemen dari gulungan halaman: diposisikan terhadap jendela browser dan tetap di tempatnya selama halaman digulir — navbar atas yang selalu terlihat dan tombol "kembali ke atas" adalah penghuni tetap pola ini. absolute menempatkan elemen pada titik tepat di dalam leluhur terdekat yang ber-position (biasanya relative) — elemen lain tidak lagi menyisakan ruang baginya, sehingga ia bisa menumpuk di atas apa pun; inilah dasar dropdown, tooltip, dan badge notifikasi.

Kuncinya satu kalimat: offset top/right/bottom/left hanya bekerja setelah position diatur pada elemen itu. Tanpa position, keempat properti itu diam seribu bahasa.

Coba contoh kode

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #1c2833;
  padding: 12px 20px;
}

.kartu { position: relative; }

.badge {
  position: absolute;
  top: -8px; right: -8px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

Trio kegunaan nyata: navbar fixed menempel di atas layar berapa pun halaman digulir; .kartu diberi relative semata agar menjadi "pasangan" koordinat; .badge absolute menempel di pojok kartu itu (negatif -8px menjorok keluar sedikit) — resep notifikasi merah yang familar.

Latihan singkat

Buat kartu relative dengan badge absolute di pojoknya, lalu navbar fixed yang tetap terlihat saat halaman digulir.