CSS Anchor Positioning 完整教學：用原生 CSS 打造 Tooltip 和 Dropdown 不再需要 JavaScript

你有沒有遇過這種情況：為了一個小小的 tooltip，結果引入了 Popper.js 或 Floating UI，然後 bundle size 莫名多了 30KB？說實話，我以前也是這樣，直到 CSS Anchor Positioning 出現，整個遊戲規則都變了。

什麼是 CSS Anchor Positioning？

CSS Anchor Positioning 是 CSS 的原生錨點定位機制，讓你可以用純 CSS 把一個元素「錨定」在另一個元素旁邊。不需要 JavaScript 計算位置、不需要監聽 scroll 事件、不需要第三方函式庫。瀏覽器幫你搞定一切。

簡單來說，它解決了前端開發者多年來的痛點：「怎麼讓 tooltip、dropdown、popover 精確地出現在目標元素旁邊？」以前我們需要 JavaScript 去算位置，現在只要幾行 CSS 就搞定。

核心觀念：anchor-name 與 position-anchor

整個 Anchor Positioning 的運作建立在兩個核心屬性上：

• anchor-name：定義錨點元素的名稱
• position-anchor：指定要錨定到哪個錨點

程式碼長這樣：

.trigger {
  anchor-name: --my-tooltip;
}

.tooltip {
  position: fixed;
  position-anchor: --my-tooltip;
  top: anchor(bottom);
  left: anchor(center);
}

就這樣！tooltip 會自動出現在 trigger 元素的正下方中間。老實說，第一次看到這個語法的時候我有點不敢相信，這也太簡潔了吧。

anchor() 函式深入解析

anchor() 函式是整個系統的核心，它接受一個位置參數，告訴瀏覽器要對齊到錨點的哪個邊：

你也可以用百分比，像 anchor(50%) 等同於 anchor(center)，這在做微調的時候特別好用。

Step 1：打造一個基本 Tooltip

來動手做一個最基本的 tooltip。首先是 HTML 結構：

<button class="trigger" popovertarget="tip">hover me</button>
<div id="tip" popover class="tooltip">這是提示文字</div>

然後是 CSS：

.trigger {
  anchor-name: --tip-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --tip-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% -8px;
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

注意到了嗎？我搭配了 Popover API，這樣連 show/hide 的邏輯都不用寫。如果你對 CSS 的新特性有興趣，也可以看看 CSS @property 自訂屬性教學，裡面的自訂屬性搭配 anchor positioning 可以玩出很多花樣。

Step 2：打造 Dropdown 選單

Dropdown 的做法跟 tooltip 差不多，差別在於定位方向和互動模式：

.dropdown-trigger {
  anchor-name: --dropdown;
}

.dropdown-menu {
  position: fixed;
  position-anchor: --dropdown;
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
  margin-top: 4px;
}

這邊有個很實用的函式 anchor-size(width)，它會讓 dropdown 的寬度跟觸發按鈕一樣寬。我自己的經驗是，很多設計稿都要求 dropdown 跟按鈕等寬，以前要用 JS 去量，現在一行 CSS 搞定。

Step 3：設定 position-try-fallbacks 避免溢出

這是 Anchor Positioning 最強大的功能之一。你有沒有遇過 tooltip 在畫面邊緣被切掉的問題？position-try-fallbacks 可以設定備用位置：

.tooltip {
  position-try-fallbacks: --top, --bottom, --left, --right;
}

@position-try --top {
  bottom: anchor(top);
  left: anchor(center);
}

@position-try --bottom {
  top: anchor(bottom);
  left: anchor(center);
}

瀏覽器會依序嘗試每個位置，直到找到一個不會溢出 viewport 的方案。這以前用 Floating UI 要寫一堆 middleware 的東西，現在原生就支援了。搭配 CSS @layer 層疊圖層教學 中的層疊管理，可以讓你的元件庫更有條理。

Step 4：整合 Popover API 實現完整互動

把 Anchor Positioning 跟 Popover API 結合，你可以得到完全不依賴 JavaScript 的互動式 UI 元件：

<button popovertarget="menu" class="nav-btn">選單</button>
<nav id="menu" popover class="nav-menu">
  <a href="#">首頁</a>
  <a href="#">關於</a>
  <a href="#">聯絡</a>
</nav>

Popover API 處理 show/hide 和鍵盤操作，Anchor Positioning 處理位置。兩者搭配起來就是完美的原生解決方案。

瀏覽器支援度與 Progressive Enhancement

截至 2026 年初，Chrome 125+ 和 Edge 125+ 已經完整支援 Anchor Positioning，Firefox 也在實作中。我建議用 @supports 做漸進增強：

@supports (anchor-name: --test) {
  /* Anchor Positioning 樣式 */
}

@supports not (anchor-name: --test) {
  /* fallback 樣式 */
}

在不支援的瀏覽器上可以退回到絕對定位或繼續用 JS 方案。

跟 Popper.js / Floating UI 比較

說實話，Popper.js 和 Floating UI 在過去幾年幫了前端開發者很多忙，但有些缺點是 JavaScript 方案難以避免的：

• 增加 bundle size（Floating UI core + dom 約 15KB gzipped）
• 需要額外的事件監聽和清理
• 動態計算會造成 layout shift
• SSR 環境下可能出現閃爍

CSS Anchor Positioning 完全沒有這些問題，因為它是瀏覽器原生的渲染邏輯。如果你同時在處理色彩系統，也推薦看看 CSS color-mix() 色彩函式教學，現代 CSS 真的進步很多。

總結與建議

CSS Anchor Positioning 是近年來最讓我興奮的 CSS 新功能之一。它不只是語法糖，而是從根本上改變了我們處理定位問題的方式。建議大家現在就開始在 side project 中嘗試，等瀏覽器支援更完整的時候就能無縫切換到生產環境了。