Positioning Dasar: Static, Relative, Absolute

Aliran normal dan cara keluar darinya

Secara default semua elemen mengikuti aliran normal: block tersusun ke bawah, inline mengalir ke samping. Properti position memungkinkanmu memindahkan elemen keluar dari aliran ini.

position: static (default)

.kotak {
  position: static; /* bawaan, tidak perlu ditulis */
}

Elemen static mengikuti aliran normal dan mengabaikan properti top, right, bottom, left, dan z-index. Tidak ada yang spesial, ini keadaan awal semua elemen.

position: relative

Elemen digeser relatif dari posisi normalnya, tapi "tempat aslinya" di aliran layout tetap dijaga (elemen lain tidak bergeser mengisi kekosongan).

.badge {
  position: relative;
  top: -10px;  /* geser 10px ke atas dari posisi normal */
  left: 5px;
}

top: -10px artinya geser ke atas 10px. Nilai positif top menggeser ke bawah, positif left menggeser ke kanan.

Fungsi terbesar relative sebenarnya bukan menggeser dirinya, melainkan menjadi jangkar untuk anaknya yang absolute (dibahas di bawah).

position: absolute

Elemen keluar total dari aliran normal (tempatnya hilang, elemen lain mengisi) dan diposisikan relatif terhadap containing block-nya.

.kartu {
  position: relative; /* jadi jangkar */
}

.kartu .label-diskon {
  position: absolute;
  top: 12px;
  right: 12px;
}

Label diskon akan menempel 12px dari atas dan kanan kartu, bukan dari halaman. Kenapa? Karena containing block dari elemen absolute adalah leluhur terdekat yang position-nya bukan static.

Konsep containing block

Aturannya:

1. Kalau ada leluhur dengan position: relative (atau absolute/fixed/sticky), leluhur terdekat itulah acuannya.
2. Kalau tidak ada sama sekali, acuannya adalah area awal halaman (initial containing block).

Catatan teknis: bug absolute paling umum adalah lupa memberi position: relative pada induknya. Gejalanya: elemen absolute "terbang" ke pojok halaman yang aneh. Begitu melihat gejala ini, cek dulu apakah induk yang dimaksud sudah relative.

Contoh praktis: badge notifikasi

.ikon-bell {
  position: relative;
}

.ikon-bell .dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: red;
}

Titik merah menempel di pojok kanan atas ikon lonceng, pola yang dipakai hampir semua aplikasi.

Rangkuman

Static itu default dan tidak bisa digeser. Relative menggeser dari posisi normal sambil menjaga tempatnya, dan berfungsi sebagai jangkar. Absolute keluar dari aliran dan berpatokan pada leluhur non-static terdekat. Kuasai containing block dan separuh misteri positioning hilang.