Positioning Patterns

Sejauh ini kita telah menguasai bahan-bahan positioning: lima nilai position, properti offset, urutan lapisan, dan stacking context. Chapter ini merangkai bahan tersebut menjadi resep yang dipakai berulang kali di proyek nyata — pola-pola yang sangat lazim sehingga layak dihafalkan bentuknya. Setiap resep kita sajikan ringkas beserta alasannya, dan dua demo pada chapter ini dapat dibuka langsung untuk melihat semuanya beraksi.

Badge dan Tooltip #

Pola badge memakai pasangan relative–absolute: parent menerima position: relative sebagai acuan, anak menerima position: absolute dengan offset menuju sudut yang dituju. Pola tooltip memakai pasangan yang sama, hanya saja anaknya digeser ke atas pemicunya.

.kartu-produk {
  position: relative;
}
.badge {
  position: absolute;
  top: 12px;
  right: 12px;
}
.pemicu {
  position: relative;
}
.tooltip {
  position: absolute;
  bottom: 48px;
  left: 8px;
}

<article class="kartu-produk">
  <span class="badge">Baru</span>
  <h3>Kopi Gayo 250g</h3>
</article>
<button class="pemicu">
  Bantuan
  <span class="tooltip">Klik untuk melihat panduan singkat.</span>
</button>

Hasil di Browser:

Badge menempel di sudut kanan atas kartu (computed top: 12px,
right: 12px). Tooltip tampil 48px di atas pemicunya (computed
bottom: 48px, left: 8px) karena pemicu membawa position: relative.
Skip-link tersembunyi di luar layar (computed position: absolute,
left: -9999px) dan header halaman membawa position: sticky dengan
top: 0px sehingga mengikuti gulir.

Nilai bottom: 48px mengukur dari tepi bawah pemicu setinggi 40px plus jarak lega 8px, sehingga tooltip melayang persis di atasnya. Pada halaman nyata, tooltip ditampilkan saat pemicu mendapat :hover atau fokus keyboard; demo kita menampilkannya permanen agar terlihat tanpa interaksi.

Overlay Modal dan Header Sticky #

Overlay modal menggelapkan seluruh halaman dan menaruh dialog di tengahnya. Resepnya menggabungkan dua materi: position: fixed berpatokan viewport, dan inset: 0 mengikat keempat sisi sekaligus.

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog {
  width: 360px;
  background: rgb(255, 255, 255);
  border-radius: 12px;
  padding: 24px;
}

<div class="overlay">
  <div class="dialog">
    <h2>Hapus catatan?</h2>
    <p>Tindakan ini tidak dapat dibatalkan.</p>
    <button>Batal</button>
    <button>Hapus</button>
  </div>
</div>

Dengan inset: 0, overlay menutup viewport apa pun ukurannya, dan display: flex pada overlay mementarkan dialog tanpa perlu menghitung offset. Warna latar rgba dengan alfa 0.55 menggelapkan konten di belakangnya sambil tetap memperlihatkan siluet halaman. Dialog modal yang memakai elemen <dialog> bawaan HTML memberikan perilaku serupa tanpa CSS manual — keduanya sah, pilihlah sesuai kebutuhan interaksi.

Dua pola kecil melengkapi koleksi ini. Header menempel memakai position: sticky; top: 0 langsung pada elemen header — lebih ramah layout daripada fixed karena slot alurnya tetap tersedia. Skip link memakai position: absolute; left: -9999px untuk menyembunyikan tautan “langsung ke konten” di luar layar, lalu membawanya kembali dengan :focus:

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
}

Skip link adalah salah satu pola aksesibilitas yang paling ringkas untuk ditambahkan: pengguna keyboard menekan Tab di awal halaman dan langsung memperoleh jalan pintas tanpa melalui seluruh navigasi. Penyembunyiannya memakai offset, bukan display: none, agar tautan tetap dapat menerima fokus dan tetap terbaca oleh pembaca layar. Perpindahan ke position: fixed hanya terjadi saat fokus, sehingga tata letak halaman tidak pernah bergeser.

Memilih Teknik yang Tepat #

Ketika menghadapi kebutuhan positioning baru mulai dari sekarang, biasakan mencocokkannya dengan salah satu resep di atas sebelum menulis kode dari nol — kebanyakan kasus ternyata adalah variasi dari enam pola ini.