Tutorial Lengkap CSS Anchor Positioning Modern

CSS Anchor Positioning adalah fitur CSS modern yang memungkinkan elemen diposisikan secara dinamis relatif terhadap elemen lain tanpa perlu JavaScript kompleks. Fitur ini hadir sebagai solusi baru untuk membuat tooltip, dropdown, popover, context menu, hingga floating UI dengan pendekatan yang lebih deklaratif dan native langsung dari CSS. Di tengah perkembangan layout modern seperti Flexbox dan Grid, Anchor Positioning menjadi langkah evolusi berikutnya dalam sistem positioning antarmuka web.

Sebelumnya, banyak developer mengandalkan kombinasi position: absolute, perhitungan koordinat manual menggunakan JavaScript, atau library seperti Popper.js untuk menangani positioning elemen interaktif. Sayangnya, pendekatan tersebut sering menambah kompleksitas kode dan rentan terhadap bug responsivitas. Dengan CSS Anchor Positioning, browser kini dapat memahami hubungan antar elemen secara langsung sehingga proses positioning menjadi lebih bersih, responsif, dan mudah dikelola. Pada artikel ini, kita akan membahas pengertian CSS Anchor Positioning, cara kerja, sintaks, implementasi, hingga browser support-nya secara lengkap.

Apa Itu CSS Anchor Positioning?

CSS Anchor Positioning adalah fitur CSS modern yang memungkinkan suatu elemen diposisikan relatif terhadap elemen lain yang bertindak sebagai anchor atau titik referensi. Dengan fitur ini, elemen seperti tooltip, dropdown, popover, dan floating menu dapat mengikuti posisi elemen target secara otomatis tanpa membutuhkan perhitungan koordinat menggunakan JavaScript.

Fitur ini menggunakan properti seperti anchor-name, position-anchor, dan fungsi anchor() untuk membangun hubungan spasial antar elemen secara deklaratif. Pendekatan tersebut membuat sistem positioning menjadi lebih fleksibel, responsif, dan mudah dipelihara dibanding teknik tradisional seperti position: absolute atau library positioning eksternal.

Dalam ekosistem CSS modern, Anchor Positioning dianggap sebagai evolusi baru setelah Flexbox dan Grid karena fokus utamanya adalah mengatur hubungan posisi antar elemen independen di dalam layout web.

Baca Juga: Belajar CSS #1: CSS Adalah, Pengertian Dan Praktik Terbaik

Konsep Inti dalam CSS Anchor Positioning

Sebelum masuk ke implementasi kode, ada beberapa konsep penting yang wajib dipahami agar fitur ini tidak terasa membingungkan.

1. anchor-name

Properti ini digunakan untuk mendefinisikan elemen sebagai anchor atau titik referensi.

Contoh:

.button {
anchor-name: --buttonAnchor;
}
Code language: CSS (css)

Nama anchor menggunakan format mirip CSS custom property dengan awalan --.

Artinya, elemen tersebut sekarang dapat dijadikan acuan posisi oleh elemen lain.

2. Fungsi anchor()

Fungsi ini digunakan untuk mengambil posisi tertentu dari anchor.

Contoh:

top: anchor(bottom);
left: anchor(left);
Code language: HTTP (http)

Artinya:

• posisi atas elemen mengikuti sisi bawah anchor
• posisi kiri elemen mengikuti sisi kiri anchor

Browser akan menghitung koordinatnya secara otomatis.

Baca Juga: Belajar CSS #2: Sintaks Dasar CSS untuk Pemula

3. position-anchor

Properti ini digunakan untuk menentukan anchor mana yang menjadi referensi.

Contoh:

.tooltip {
  position-anchor: --buttonAnchor;
}
Code language: CSS (css)

Dengan ini tooltip mengetahui elemen mana yang harus diikuti.

4. Anchor Scope

Anchor bekerja dalam konteks DOM tertentu. Jika struktur komponen terlalu kompleks atau terisolasi, anchor mungkin tidak bisa ditemukan.

Hal ini penting terutama dalam:

• React component
• Vue component
• Shadow DOM
• modular UI system

5. Fallback Browser Support

Karena fitur ini masih tergolong modern, belum semua browser mendukung penuh. Oleh karena itu developer tetap disarankan menggunakan fallback dengan:

@supportsCode language: CSS (css)

atau progressive enhancement.

Baca Juga: Belajar CSS #3: Selektor CSS, Jenis dan Contoh Penerapan

Cara Kerja CSS Anchor Positioning

Secara teknis, Anchor Positioning bekerja dengan menjadikan elemen anchor sebagai referensi koordinat bagi elemen lain. Mekanismenya dapat dijelaskan dalam beberapa tahapan berikut:

1. Deklarasi Anchor
   Elemen ditetapkan sebagai anchor menggunakan anchor-name. Ini seperti memberi label koordinat pada elemen tersebut.
2. Referensi oleh Elemen Target
   Elemen lain menggunakan position-anchor untuk menentukan anchor mana yang dijadikan acuan.
3. Pengambilan Nilai Posisi
   Properti seperti top, left, right, atau bottom menggunakan fungsi anchor() untuk menentukan sisi mana yang ingin diikuti.
4. Perhitungan Dinamis oleh Browser
   Browser secara otomatis menghitung ulang posisi jika terjadi perubahan layout, resize, atau scroll.

Menariknya, semua ini terjadi tanpa JavaScript tambahan. Interaksi dengan scroll dan viewport juga otomatis ditangani oleh engine browser. Jika anchor bergerak karena responsivitas, elemen yang menempel akan ikut menyesuaikan.

Baca Juga: Belajar CSS #4: Perbedaan Pseudo Class dan Pseudo Elemen

Sintaks Dasar dan Contoh Implementasi

Agar lebih mudah dipahami, berikut contoh full code yang bisa langsung dicoba pembaca.

Contoh Tooltip Modern Menggunakan CSS Anchor Positioning

HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Anchor Positioning</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <button class="btn">
    Hover Saya
  </button>

  <div class="tooltip">
    Ini tooltip modern tanpa JavaScript 🚀
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

CSS

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f4f4;
}

.container {
  position: relative;
}

/* Anchor Element */
.btn {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  background: #2563eb;
  color: white;
  font-size: 16px;
  cursor: pointer;

  anchor-name: --buttonAnchor;
}

/* Tooltip */
.tooltip {
  position: absolute;

  position-anchor: --buttonAnchor;

  top: anchor(bottom);
  left: anchor(center);

  translate: -50% 10px;

  background: #111827;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transition: 0.3s;
}

/* Hover State */
.btn:hover + .tooltip {
  opacity: 1;
  visibility: visible;
}
Code language: CSS (css)

Hasil Implementasi

Dengan kode di atas:

• tooltip otomatis muncul tepat di bawah tombol
• posisi tetap akurat saat layout berubah
• tidak perlu JavaScript positioning
• struktur kode jauh lebih bersih

Contoh Dropdown Menu Menggunakan CSS Anchor Positioning

Selain tooltip, Anchor Positioning juga sangat cocok untuk dropdown menu.

HTML

<div class="dropdown-wrapper">

  <button class="menu-btn">
    Menu ▼
  </button>

  <div class="dropdown">
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <a href="#">Logout</a>
  </div>

</div>
Code language: HTML, XML (xml)

CSS

.dropdown-wrapper {
  position: relative;
}

.menu-btn {
  padding: 12px 20px;
  background: #0f172a;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  anchor-name: --menuAnchor;
}

.dropdown {
  position: absolute;

  position-anchor: --menuAnchor;

  top: anchor(bottom);
  left: anchor(left);

  margin-top: 10px;

  width: 200px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);

  display: none;
  overflow: hidden;
}

.dropdown a {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  color: #111827;
}

.dropdown a:hover {
  background: #f3f4f6;
}

.dropdown-wrapper:hover .dropdown {
  display: block;
}
Code language: CSS (css)

Perbandingan: Anchor Positioning vs Teknik Lama

Untuk memahami seberapa revolusioner fitur ini, berikut tabel perbandingan dengan pendekatan sebelumnya:

Aspek	Anchor Positioning	Absolute Positioning	JavaScript Positioning
Ketergantungan JS	Tidak perlu	Tidak	Ya
Relasi Antar Elemen	Deklaratif & eksplisit	Bergantung parent	Manual
Responsif Otomatis	Ya	Terbatas	Bergantung implementasi
Kompleksitas Kode	Lebih ringkas	Sedang	Tinggi
Maintainability	Tinggi	Menengah	Rendah–Menengah

Dari perbandingan tersebut terlihat bahwa Anchor Positioning membawa pendekatan yang lebih bersih dan native.

Browser Support CSS Anchor Positioning

Karena masih tergolong fitur modern, support browser masih berkembang.

Saat artikel ini ditulis:

Browser	Support
Chrome	Experimental
Edge	Experimental
Firefox	Belum Stabil
Safari	Terbatas

Developer disarankan menggunakan progressive enhancement.

Baca Juga: Apa Itu Critical CSS? Teknik Penting Percepat Website

Kesimpulan

Pada pembahasan di atas dapat disimpulkan bahwa CSS Anchor Positioning merupakan fitur CSS modern yang membawa pendekatan baru dalam sistem positioning antarmuka web. Dengan konsep anchor dan relasi spasial antar elemen, developer kini dapat membuat tooltip, dropdown, popover, dan floating UI secara lebih deklaratif tanpa bergantung pada JavaScript positioning yang kompleks. Pendekatan ini membuat kode menjadi lebih bersih, responsif, dan mudah dipelihara dalam pengembangan aplikasi web modern.

Bagi programmer maupun mahasiswa IT, memahami CSS Anchor Positioning menjadi langkah penting untuk mengikuti evolusi CSS modern setelah Flexbox dan Grid. Meskipun dukungan browser masih berkembang, fitur ini memiliki potensi besar untuk menjadi standar baru dalam membangun UI interaktif yang lebih efisien dan scalable di masa depan.

Artikel ini merupakan bagian dari seri BELAJAR CSS KantinIT.com. Jika artikel ini bermanfaat, jangan lupa bagikan ke media sosial atau ke teman kamu.