CSS Anchor Positioning

TL;DR: CSS Anchor Positioning adalah fitur CSS modern yang memungkinkan elemen seperti tooltip, popover, atau dropdown diposisikan relatif terhadap elemen anchor menggunakan properti anchor-name dan position-anchor. Sejak Chrome 125 (2024) dan stabil Baseline 2026, fitur ini menghilangkan kebutuhan library seperti Floating UI atau Popper.js untuk kasus positioning sederhana.

Apa itu CSS Anchor Positioning?

CSS Anchor Positioning adalah API CSS yang menghubungkan dua elemen, satu sebagai anchor (jangkar) dan satu sebagai elemen yang diposisikan, lewat properti standar. Cara kerja singkatnya: anchor diberi anchor-name, lalu elemen target memakai position-anchor plus top/left/inset-area dengan fungsi anchor(). Hasilnya, elemen target otomatis menempel ke anchor saat scroll, resize, atau perubahan layout.

Konsep ini mirip dengan apa yang dilakukan library Popper.js atau Floating UI, tetapi dijalankan oleh browser secara native tanpa biaya runtime JavaScript. Untuk pemahaman tooltip dasarnya, lihat juga Popover API yang sering dipasangkan dengan fitur ini.

Cara Kerja Singkat

.tombol { anchor-name: --tombol-cta; }
.tooltip {
  position: absolute;
  position-anchor: --tombol-cta;
  top: anchor(bottom);
  left: anchor(center);
}

Tiga properti inti yang dipakai meliputi anchor-name untuk menandai anchor, position-anchor untuk menunjuk anchor pada elemen target, dan fungsi anchor() plus inset-area untuk menempatkan posisi relatif.

Kenapa Penting untuk Marketer Indonesia?

Penghapusan library positioning bisa memangkas 8 sampai 18 KB bundle JavaScript per halaman, angka yang relevan untuk visitor 3G dan 4G di Indonesia. Bundle yang lebih ramping akan menurunkan LCP (Largest Contentful Paint) dan memperbaiki sinyal Core Web Vitals. Untuk halaman landing page bisnis yang ramai komponen interaktif seperti dropdown menu dan tooltip CTA, dampaknya terasa di skor Lighthouse mobile.

Pertanyaan Umum

Apakah CSS Anchor Positioning sudah aman dipakai di produksi 2026?

Per Mei 2026, Anchor Positioning sudah masuk Baseline 2026 untuk Chrome, Edge, dan Safari Technology Preview. Firefox masih di balik flag, jadi gunakan progressive enhancement dengan fallback position: absolute biasa.

Bedanya dengan Popover API?

Popover API mengatur perilaku tampil dan tutup popover (modal-like behavior), sementara Anchor Positioning hanya soal lokasi geometri. Keduanya sering dipakai bersamaan untuk popover yang menempel ke tombol.