Absolute Positioning

Badge “Baru” di sudut kartu produk, label harga yang menempel pada tepi foto, dan ikon notifikasi di atas tombol memiliki pola yang sama: sebuah elemen diletakkan presisi di titik tertentu tanpa mengganggu elemen lain. Pola itu dibangun dengan position bernilai absolute. Nilai ini menarik elemen keluar dari alur dokumen dan menempatkannya berpatokan pada elemen acuan yang kita pilih. Pada Chapter ini kita membedah cara memilih acuan tersebut, membuat badge di sudut kartu, dan membongkar jebakan yang paling sering membuat elemen absolute “kabur” ke tempat yang tidak terduga.

Keluar dari Alur dan Mencari Acuan #

Elemen absolute dikeluarkan dari alur dokumen: slot aslinya tidak disisakan, sehingga elemen-elemen setelahnya naik mengisi ruang kosong itu. Setelah keluar, posisi elemen diukur dari sisi containing block-nya — elemen ancestor yang berstatus positioned, yaitu memiliki position selain static.

Aturan pemilihan acuannya penting diingat dengan tepat: acuan adalah ancestor positioned terdekat, bukan parent apa pun. Jika tidak ada satu pun ancestor yang positioned, acuannya jatuh ke initial containing block — kotak seukuran viewport yang berada di titik nol dokumen. Properti top, right, bottom, dan left kemudian mengukur jarak tepi elemen ke sisi yang sama pada acuan tersebut.

Nilai auto pada offset menyerahkan penempatan ke browser: elemen diletakkan pada posisi statisnya, yaitu titik tempat elemen itu seharusnya berada seandainya tetap di alur.

Contoh: Badge di Sudut Kartu #

Demo chapter ini menampilkan kartu produk dengan badge dan label harga yang menempel pada tepinya, plus panel kedua yang memperlihatkan jebakan parent tanpa position. Berikut CSS inti kartunya:

.kartu {
  position: relative;
  width: 300px;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}
.label-harga {
  position: absolute;
  bottom: 12px;
  left: 12px;
}

<article class="kartu">
  <span class="badge">Baru</span>
  <h3>Sepatu Lari Aero</h3>
  <p>Ringan, empuk, siap dipakai.</p>
  <span class="label-harga">Rp599.000</span>
</article>

Hasil di Browser:

Badge "Baru" menempel di sudut kanan atas kartu: computed position:
absolute, top: 8px, right: 8px. Label harga menempel di sudut kiri
bawah kartu (computed bottom: 12px, left: 12px). Keduanya tidak
mempengaruhi tinggi kartu karena keluar dari alur. Kartu bertindak
sebagai acuan karena position: relative.

Mari kita telaah pola ini baris demi baris:

1. Baris 2 (position: relative): kartu menjadi acuan bagi anak-anak absolute-nya. Tanpa baris ini, badge dan label akan mencari acuan lain yang lebih jauh.
2. Baris 3 (width: 300px): kartu diberi lebar tetap. Elemen absolute di dalamnya mengukur offset dari tepi kartu, bukan dari viewport.
3. Baris 6–8 (top: 8px + right: 8px): badge ditempatkan 8px dari tepi atas dan 8px dari tepi kanan kartu — pola klasik badge di sudut.
4. Baris 11–13 (bottom: 12px + left: 12px): label harga diikat ke tepi bawah kiri. Memakai bottom (bukan top) menjaga label menempel di dasar kartu sekalipun tinggi teks deskripsi berubah.

Jebakan: Parent yang Tidak Positioned #

Panel kedua pada demo memperlihatkan jebakan yang paling sering dialami pemula. Sebuah div parent ditulis tanpa properti position sama sekali, lalu anaknya diberi position: absolute; top: 0; left: 0. Intuisi banyak orang menyarankan anak itu menempel di sudut parent — kenyataannya anak melompat ke titik nol dokumen, karena parent yang statis bukanlah acuan yang sah.

Pola perbaikannya konsisten dan layak diingat sebagai pasangan: parent menerima position: relative (tetap di alur, tanpa offset), anak menerima position: absolute dengan offset yang diinginkan. Detail tentang sifat acuan ini dijelaskan lebih rinci pada halaman MDN tentang containing block .