Digital Transformation
CSS Anchor Positioning
TL;DR: CSS Anchor Positioning adalah API CSS native yang memungkinkan elemen seperti tooltip, dropdown, atau popover diposisikan relatif terhadap elemen referensi tanpa JavaScript. Per April 2026 didukung Chromium 125+, dan menghemat puluhan baris kode positioning yang biasanya butuh library seperti Floating UI.
Apa itu CSS Anchor Positioning?
CSS Anchor Positioning memberi developer cara mendeklarasikan dua hubungan antar elemen, yaitu elemen anchor (jangkar) dan elemen yang diposisikan (positioned element), lewat properti CSS murni. Sebelum spesifikasi ini, marketer dan developer harus mengandalkan JavaScript atau library pihak ketiga untuk menjaga tooltip tetap menempel pada tombol meski layar bergulir atau berubah ukuran. Dengan anchor positioning, browser menangani perhitungan ini secara native dan menjaga rendering tetap halus, terutama saat dipasangkan dengan Popover API.
Syntax intinya menggunakan properti anchor-name pada elemen jangkar dan position-anchor plus fungsi anchor() pada elemen yang diposisikan. Hasilnya: layout dropdown atau tooltip yang konsisten lintas browser modern, tanpa polyfill berat.
Cara Kerja Dasar
| Properti | Fungsi |
|---|---|
anchor-name: --tombol | Mendaftarkan elemen sebagai anchor dengan nama. |
position-anchor: --tombol | Mengikat elemen yang diposisikan ke anchor. |
top: anchor(bottom) | Menempatkan elemen di bawah anchor. |
position-try-fallbacks | Fallback otomatis jika tidak muat di viewport. |
Fitur position-try-fallbacks membantu mencegah tooltip terpotong di tepi layar, masalah klasik di mobile.
Kenapa Penting untuk Marketer?
Landing page modern penuh dengan elemen interaktif seperti tooltip harga, dropdown filter produk, dan dialog upsell. Setiap library JavaScript yang dipakai untuk positioning menambah beban LCP dan INP. Memindahkan logika positioning ke CSS native memangkas bundle JavaScript 5-15 KB tergantung library yang digantikan, dan meningkatkan skor Core Web Vitals yang menjadi sinyal ranking Google.
Untuk pasar Indonesia di mana sebagian besar pengunjung memakai perangkat mid-range, setiap kilobyte JavaScript yang bisa diganti CSS native adalah kemenangan kecepatan yang nyata.
Pertanyaan Umum
Apakah CSS Anchor Positioning sama dengan Floating UI?
Tidak persis. Floating UI adalah library JavaScript dengan kontrol detail, sementara CSS Anchor Positioning adalah standar web yang berjalan di mesin rendering browser. Banyak kasus tooltip sederhana cukup dengan CSS Anchor Positioning saja.
Browser mana yang sudah mendukung?
Chrome dan Edge 125+ mendukung penuh. Firefox dan Safari sedang dalam tahap implementasi per April 2026. Strategi aman: pakai sebagai progressive enhancement dengan fallback JavaScript untuk browser lama.
Istilah Terkait