CSS Anchor Positioning 錨點定位完全教學：告別 JavaScript 定位 Hack

做前端做久了，tooltip 和 dropdown 的定位永遠是最煩的事之一。以前不管怎麼做，最後都會搬出 Popper.js 或 Floating UI 來處理那些邊界偵測、自動翻轉的邏輯。但 2026 年的現在，瀏覽器終於給了我們一個原生解法——CSS Anchor Positioning。

這篇文章帶你從零開始搞懂這個新的 CSS 功能，用純 CSS 就能搞定 tooltip、dropdown、popover 的定位，而且還能自動處理溢出翻轉。

什麼是 CSS Anchor Positioning？

簡單來說，CSS Anchor Positioning 讓你可以用純 CSS 宣告「這個浮動元素要跟著那個元素走」。過去你要用 JavaScript 監聽捲動、計算 getBoundingClientRect、處理 ResizeObserver，現在這些全部交給瀏覽器搞定。

它的核心概念就三個東西：

• 錨點（Anchor）：被參考的元素，比如一個按鈕
• 定位元素（Positioned Element）：要跟著錨點走的元素，比如 tooltip
• 備用位置（Fallback）：空間不夠時自動切換的位置

2026 年瀏覽器支援現況

截至 2026 年 3 月，主要瀏覽器的支援狀況已經相當成熟：Chrome 125+、Edge 125+、Safari 26+、Firefox 147+ 都已支援核心功能。基本上現代瀏覽器都能用了，唯一要注意的是一些進階屬性（像 anchor-scope）可能還需要做 feature detection。

搭配 @supports 做漸進增強也是一個穩妥的做法。

核心概念：錨點、定位元素、備用位置

要把一個元素變成錨點，只需要給它一個 anchor-name：

.my-button {
  anchor-name: --my-btn;
}

接著在浮動元素上用 position-anchor 指定它要跟著哪個錨點：

.tooltip {
  position: absolute;
  position-anchor: --my-btn;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}

anchor() 函式回傳錨點元素邊緣的位置值，還可以搭配 calc() 來加上間距：bottom: calc(anchor(top) + 8px)。

最殺手級的功能是 position-try-fallbacks。當空間不夠時，它會自動嘗試其他位置：

.tooltip {
  position-try-fallbacks: flip-block, flip-inline;
}

瀏覽器會自動偵測溢出方向並翻轉，以前這是 Floating UI 的核心功能，現在 CSS 原生就做到了。

實戰：純 CSS Tooltip

搭配 Popover API 來處理顯示隱藏：

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

.trigger { anchor-name: --trigger; }
.tooltip {
  position: absolute;
  position-anchor: --trigger;
  bottom: calc(anchor(top) + 8px);
  left: anchor(center);
  translate: -50% 0;
  position-try-fallbacks: flip-block;
  background: #1a1a2e;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

不需要任何 JavaScript，tooltip 自動定位，空間不夠就翻到下方。

實戰：Dropdown 下拉選單

.dropdown-trigger { anchor-name: --dropdown; }
.dropdown-menu {
  position: fixed;
  position-anchor: --dropdown;
  top: anchor(bottom);
  left: anchor(left);
  min-width: anchor-size(width);
  position-try-fallbacks: flip-block;
}

anchor-size(width) 回傳錨點元素的寬度，讓下拉選單至少跟觸發按鈕一樣寬。以前都要用 JS 量，現在一行 CSS 搞定。

Anchor Positioning 跟 CSS View Transitions 一樣，都是近年瀏覽器推出的重量級新 API。搭配 Popover API 使用效果更好。想了解更多前端設計的現代技巧，推薦延伸閱讀 CSS :has() 選擇器教學和 CSS Container Queries 教學。

跟 Floating UI / Popper.js 比較

新專案如果不需要支援太舊的瀏覽器，直接用 Anchor Positioning。舊專案用 @supports(anchor-name: --x) 做 feature detection 漸進遷移。

結語：前端定位的未來

CSS Anchor Positioning 代表了前端開發的重要趨勢：把本來需要 JavaScript 才能做到的事，交回給 CSS 和瀏覽器。從 Container Queries 到 View Transitions 到 Anchor Positioning，每一個新功能都在減少對 JS 函式庫的依賴。如果你還在用 Tailwind CSS 搭配 headless UI 做 dropdown 定位，不妨試試原生 Anchor Positioning，前端的程式碼會更輕量、更快、也更好維護。