Contoh Positioning

Sepanjang section ini kita telah menelusuri lima nilai position, shorthand inset, urutan tumpukan, dan kotak acuannya. Kini saatnya menyatukannya menjadi perkakas kerja: tiga pola yang paling sering kita butuhkan — gambar dengan caption overlay, tooltip visual, dan header tabel yang menempel — dirakit lengkap dengan alasannya, ditutup tabel keputusan untuk memilih nilai position dalam hitungan detik.

Pola 1: Gambar dengan Caption Overlay #

Kebutuhannya: teks keterangan menutupi bagian bawah foto dengan gradasi, plus badge di sudut. Kuncinya satu baris pada induk: position: relative sebagai jangkar.

.pembungkus-foto {
  position: relative; /* jangkar caption dan badge */
}

.caption-foto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(20, 80, 58, 0.9), rgba(20, 80, 58, 0));
  color: #ffffff;
}

Mari kita telaah keputusannya:

1. Induk relative: hanya untuk menyatakan jangkar — tanpa offset, tanpa pergeseran apa pun.
2. left: 0; right: 0: kedua sisi horizontal dipatok sehingga caption meregang selebar foto, sesuai perilaku yang dipelajari pada chapter Inset Properties.
3. bottom: 0: menempel di dasar foto, dan padding-top besar memberi ruang bagi gradasi transparan.
4. Keluar dari alur: caption tidak menambah tinggi; foto tetap berukuran rapi di bawahnya.

Demo berikut merakit Pola 1 secara utuh — induk relative, foto, caption overlay dengan gradasi, dan badge di sudut — pada dua kartu produk:

Satu baris position: relative pada kartu dan area fotonya adalah seluruh persiapan yang dibutuhkan.

Perhatikan pula urutan tumpukannya: caption dan badge sama-sama positioned dengan z-index auto, sehingga urutan markup yang memutuskan. Di sinilah kebiasaan menulis badge setelah caption di markup menyelamatkan kita — badge muncul kemudian sehingga menimpa caption bila keduanya bersinggungan. Bila urutan markup tidak bisa diubah, tinggal tambahkan z-index: 1 pada badge, sesuai skala kecil dari chapter Z-Index.

Pola 2: Tooltip Visual dengan relative + absolute #

Versi sederhana tooltip tanpa JavaScript: ikon berperilaku normal di alur, balon keterangannya mengapung di atasnya.

<button class="hint-ikon" type="button">Info
  <span class="hint-balon">Harga sudah termasuk ongkos kirim.</span>
</button>

.hint-ikon {
  position: relative; /* jangkar balon */
}

.hint-balon {
  position: absolute;
  bottom: 100%;      /* dasar balon di tepi atas ikon */
  left: -8px;
  margin-bottom: 8px; /* jarak 8px dari ikon */
  max-width: 220px;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: #1f2933;
  color: #ffffff;
  font-size: 12px;
}

Perhatikan bahwa balon tidak memerlukan width: sebagai elemen absolute, ia menyusut mengikuti isi dan dibatasi max-width — kombinasi shrink-to-fit plus batas yang kita pelajari di chapter Absolute. bottom: 100% adalah trik ringkas: 100% dari tinggi jangkar mengukur dari tepi bawah balon ke tepi atas induk, lalu margin-bottom menyisakan celah.

Dari sisi aksesibilitas, versi statis ini tetap aman: teks balon berada di DOM secara utuh, sehingga pembaca layar tetap membacanya meskipun tampilannya mengapung. Untuk interaksi sungguhan — balon yang muncul saat hover atau fokus — kita sudah memiliki semua bahan yang dibutuhkan: state :hover dan :focus-visible dari chapter Styling Links, ditambah pola jangkar dan penempel pada contoh di atas.

Pola 3: Header Tabel yang Menempel #

Dari chapter Sticky, pola baris kepala tabel di dalam panel bergulir:

.panel-tabel {
  height: 260px;
  overflow: auto; /* scrolling ancestor bagi sticky */
}

thead th {
  position: sticky;
  top: 0;
  background-color: #14503a;
  color: #ffffff;
}

Tiga baris pada .panel-tabel menyiapkan scrolling ancestor; dua baris pada thead th menetapkan ambang penempelannya. Tanpa overflow: auto pada panel, sticky akan mengambil dokumen sebagai area scroll-nya dan pola ini tidak bekerja sesuai harapan.

Tabel Keputusan: Pola ke position #

Jembatan ke Flexbox #

Positioning menggerakkan elemen satu per satu terhadap sebuah acuan — alat yang tepat untuk penempelan, penumpukan, dan koreksi kecil. Namun begitu kebutuhan berubah menjadi menyusun banyak elemen berdampingan dengan pembagian ruang yang rapi dan responsif, menulis offset satu per satu bukan lagi jalan yang sehat. Untuk pekerjaan itu kita butuh sistem layout satu dimensi: Flexbox, topik section berikutnya.

Ringkasan #

Tiga pola di atas — caption overlay, tooltip, dan header tempel — adalah bentuk akhir dari kemitraan yang sama: induk relative menyediakan jangkar, anak absolute atau sticky melakukan sisanya, dan inset merapikan deklarasinya. Tabel keputusan merangkum seluruh section menjadi panduan satu baris per kebutuhan. Dengan positioning terkuasai, kita siap melangkah ke Flexbox untuk menyusun banyak elemen sekaligus secara sistematis.