Fixed Positioning

Beberapa elemen memang seharusnya tidak ikut bergulir: banner persetujuan cookie tetap terbaca sampai pengguna menutupnya, tombol aksi melayang selalu terjangkau jempol, widget obrolan senantiasa terbuka di pojok. position: fixed menghadirkan perilaku itu. Elemen fixed diangkat dari alur — seperti absolute — tetapi jangkarnya selalu satu: viewport. Pada chapter ini kita melihat cara kerjanya, pola penggunaannya, satu peringatan penting tentang transform, dan demo yang menyimulasikan gulir halaman sungguhan.

Jangkar: Viewport, Bukan Dokumen #

Offset pada elemen fixed dihitung dari tepi viewport — jendela pemilik halaman, bukan dari dokumen. Akibatnya, sepanjang apapun halaman digulir, elemen fixed tidak bergeser sebesar apa pun; gulir bergerak di bawahnya, bukan bersamanya.

Seperti absolute, elemen fixed keluar dari alur (slotnya ditutup) dan lebarnya menyusut mengikuti isi bila tidak diset. Bedanya hanya jangkar: absolute mengikuti ancestor positioned, fixed selalu mengikuti viewport.

Karena fixed melayang di atas konten, ia hampir selalu berjalan berpasangan dengan z-index dari skala terdokumentasi — tanpa itu, urutan dokumen yang menentukan, dan elemen fixed yang muncul lebih dulu bisa tertimpa konten positioned lain. Pasangkan pula dengan latar solid atau bayangan agar konten yang lewat di belakangnya tidak menembus teksnya.

.banner-cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background-color: #14503a;
  color: #ffffff;
}

Pola Penggunaan yang Umum #

.tombol-terapung {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #14503a;
  color: #ffffff;
  font-size: 24px;
}

Ingat: karena fixed tidak menyisakan ruang di alur, konten halaman perlu padding atau margin sendiri agar bagian paling atas atau bawah tidak tertutup bilah fixed.

Catatan jujur soal demo: pada materi nyata, fixed mengacu ke viewport browser. Pada demo ini, peran viewport dimainkan oleh area iframe — gulir isi demo ke bawah, dan perhatikan elemen mana yang diam:

Kapan Bukan fixed #

Fixed menutupi konten di belakangnya dan mengurangi area layar yang tersedia. Untuk header halaman yang sekadar ingin tetap terlihat saat di-scroll, sticky biasanya lebih tepat: header tetap menempati ruang alurnya sehingga tidak ada konten tertutup di bawahnya, dan penempelannya otomatis berhenti di batas induknya. Simpan fixed untuk elemen yang benar-benar melayang bebas di atas halaman — banner yang menunggu keputusan pengguna, tombol aksi yang harus selalu terjangkau, dan widget obrolan yang menempel sampai ditutup. Aturan pilihannya sederhana: perlu menutupi konten dan bebas dari batas induk → fixed; cukup menempel di alur → sticky.

Peringatan: Induk dengan transform #

Satu perangkap terkenal menantikan fixed: bila ancestor-nya diberi transform atau filter (nilai selain none), ancestor itu menjadi jangkar baru bagi keturunan fixed-nya. Elemen yang tadinya diam di viewport mendadak “ikut bergulir” setelah kita menambahkan animasi transform pada induknya — gejala yang tampak tanpa sebab bila kita tidak tahu aturan ini.

.modal {
  transform: translateZ(0); /* modal kini menjadi jangkar bagi anak fixed */
}

Solusinya singkat: keluarkan elemen fixed dari subpohon yang ditransform, atau hapus transform yang tidak benar-benar dibutuhkan. Aturan lengkapnya dibedah pada chapter Containing Block.

Kesalahan Umum #

Ringkasan #

Fixed menempelkan elemen ke viewport dengan offset dari tepi jendela: elemen keluar dari alur, menyusut mengikuti isi bila perlu, dan bertahan diam sepanjang gulir — bahan utama banner cookie, tombol aksi melayang, dan widget obrolan. Perangkap utamanya adalah ancestor yang ditransform, yang diam-diam mencuri jangkar. Chapter berikutnya menghadirkan nilai yang lebih halus lagi: sticky, yang berperilaku normal di alur sampai sebuah ambang scroll tercapai, lalu menempel — hanya sampai batas induknya.