Absolute Positioning

Ada saatnya elemen perlu dilepas dari alur: badge di sudut kartu, titik notifikasi pada ikon, label harga yang menempel di gambar. position: absolute adalah alatnya. Elemen absolute diangkat keluar dari normal flow, sehingga ruangnya langsung dipakai elemen lain, dan posisinya dihitung terhadap sebuah jangkar yang bisa kita pilih. Pada chapter ini kita membedah aturan jangkarnya, perilaku posisi dan ukuran default-nya, lalu merakit pola paling ikoniknya: badge notifikasi pada kartu.

Mekanisme: Keluar dari Alur #

Begitu sebuah elemen menjadi absolute, browser berhenti menyediakan slot untuknya di alur. Konten setelahnya naik menutup celah, persis seperti ketika elemen itu tidak ada. Elemen lalu mengapung di atas layout pada layer tersendiri, sehingga sering menimpa konten di bawahnya.

Karena itu, elemen absolute harus selalu punya acuan. Browser memilih jangkarnya dengan satu aturan sederhana:

Kondisi	Jangkar (containing block)
Ada ancestor positioned terdekat	Padding box ancestor tersebut
Tidak ada ancestor positioned	Initial containing block — area berukuran viewport di pangkal dokumen

Yang disebut ancestor positioned adalah elemen dengan position: relative, absolute, fixed, atau sticky. Aturan ini menjelaskan bug positioning yang paling sering ditemui: badge yang seharusnya menempel di kartu justru melayang di sudut halaman, karena induknya lupa diberi position: relative. Topik jangkar ini kita dalami lebih jauh di chapter Containing Block.

Posisi dan Ukuran Default #

Dua perilaku default membuat absolute terasa jauh lebih tertib daripada kesannya:

Posisi default adalah static position — tempat elemen itu seharusnya berada di alur. Jika kita menulis position: absolute tanpa satu pun offset, elemen hanya “terangkat” dari alur, tetapi tetap terlihat di bekas tempatnya. Ini berguna untuk memindahkan elemen keluar dari alur terlebih dahulu, lalu mengatur offset-nya kemudian.
Lebar menyusut mengikuti isi (shrink-to-fit). Berbeda dari block biasa yang lebarnya mengisi ruang, elemen absolute tanpa width hanya selebar kontennya. Tambahkan width atau offset kiri-kanan sekaligus bila ingin lebar tertentu.

Pola Dasar: Badge di Sudut #

css
.lencana-notifikasi {
  position: absolute;
  top: -8px;
  right: -8px;
}

Mari kita telaah baris demi baris:

position: absolute: elemen keluar dari alur dan mencari jangkar — ancestor positioned terdekat.
top: -8px: tepi atas badge dikunci 8 piksel di atas tepi jangkar — badge menonjol keluar ke atas.
right: -8px: tepi kanan dikunci 8 piksel di luar tepi kanan jangkar — badge menonjol ke kanan.
Ukuran otomatis: tanpa width, badge menyusut mengikuti angka di dalamnya.

Pola: Badge Notifikasi pada Kartu #

Pola lengkapnya adalah kemitraan dua baris kode — induk relative sebagai jangkar, anak absolute sebagai penempel:

html
<div class="tombol-keranjang">
  Keranjang
  <span class="lencana">3</span>
</div>

css
.tombol-keranjang {
  position: relative; /* jangkar lencana */
}

.lencana {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: #b91c1c;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}

Lencana tidak mengambil ruang apa pun di dalam tombol karena ia sudah keluar dari alur.

Demo berikut memakai dua elemen absolute: lencana di sudut tombol keranjang, dan tag harga yang menempel di panel bawah — tanpa width, sehingga terlihat menyusut mengikuti isinya:

Perhatikan pembagian perannya: position: relative pada induk tidak menggeser apa pun — ia hanya menyatakan “anak absolute mengacu ke saya”. Momen inilah yang membuat chapter sebelumnya tentang relative terasa lengkap.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
Lencana muncul di sudut halaman, bukan di kartu	Induk tidak positioned	Beri `position: relative` pada induk terdekat
Konten di bawahnya “naik” menutupi elemen absolute	Elemen keluar alur, slotnya tidak dipertahankan	Jaga tinggi induk, atau sisakan padding/margin untuk area itu
Kotak menyusut dan teksnya terlipat bertumpuk	Lebar auto bersifat shrink-to-fit	Set `width` eksplisit, atau tulis offset kiri-kanan sekaligus
Elemen absolute terpotong di tepi	Induk dengan `overflow` selain `visible` memotong	Periksa `overflow` pada rantai induknya

Ringkasan #

Absolute melepaskan elemen dari normal flow: slotnya ditutup, lewarnya menyusut mengikuti isi, dan posisinya dihitung terhadap ancestor positioned terdekat — atau initial containing block bila tidak ada. Tanpa offset, elemen berdiam di static position-nya, sehingga perpindahan ke absolute bisa dilakukan bertahap. Pola kemitraan “induk relative + anak absolute” kini menjadi perangkat utamamu. Chapter berikutnya mengangkat jangkar ke level paling luar: fixed, yang selalu mengacu pada viewport dan bertahan diam selama halaman di-scroll.