CSS Popover API + Anchor Positioning 教學：零JS浮動UI元件

你是否曾為了實作一個 tooltip 或 dropdown menu，引入了整個 Popper.js 或 Floating UI？這些 JavaScript 定位函式庫固然強大，但在 2026 年的今天，瀏覽器原生的 CSS Popover API 加上 Anchor Positioning 已經能讓你用純 CSS 完成大部分浮動 UI 元件的開發。這不只是減少 bundle size 的問題，更代表了前端開發正在回歸平台原生能力的趨勢。

Popover API 與 Anchor Positioning 解決了什麼問題

傳統的浮動 UI 開發面臨三大痛點。第一，定位計算複雜：tooltip 需要出現在按鈕的正上方、dropdown 要從按鈕下方展開，這些看似簡單的需求卻涉及大量的 JavaScript 計算，包含捲動偏移、視窗邊界碰撞偵測等。第二，z-index 管理混亂：多個浮動元件疊加時，z-index 容易衝突，需要建立全域的 stacking context 管理策略。第三，無障礙支援不完整：手動實作的 popover 經常遺漏鍵盤導航、焦點陷阱和 ARIA 屬性。

Popover API 和 Anchor Positioning 分別解決了這些問題。Popover API 提供了原生的彈出層管理，自動處理 top layer 渲染（不用再煩惱 z-index）、light dismiss（點擊外部自動關閉）和鍵盤事件。Anchor Positioning 則讓你用純 CSS 宣告元件之間的空間關係，取代了 JavaScript 的定位計算。

Popover API 基礎：popover 屬性與觸發方式

使用 Popover API 非常直覺。只要在 HTML 元素上加上 popover 屬性，它就成為一個可彈出的元件：

<button popovertarget="my-tooltip">顯示說明</button>
<div id="my-tooltip" popover>
  這是一段說明文字
</div>

就這麼簡單。不需要任何 JavaScript，瀏覽器會自動處理顯示與隱藏的邏輯。popovertarget 屬性指向 popover 元素的 ID，點擊按鈕就能切換其顯示狀態。

auto 與 manual 模式差異

popover 屬性接受兩種值，行為差異相當關鍵：

auto 模式（預設值）具備 light dismiss 功能。使用者點擊 popover 外部或按下 Escape 鍵，popover 會自動關閉。同一時間只能有一個 auto popover 處於開啟狀態，開啟新的會自動關閉舊的。這適合 tooltip、dropdown menu 等一次只需要顯示一個的場景。

manual 模式需要明確的開關動作才能控制顯示狀態。多個 manual popover 可以同時開啟，不會互相影響。這適合 toast 通知、持續性面板等需要共存的場景。設定方式為 popover="manual"。

你也可以用 popovertargetaction 屬性精確控制按鈕的行為，可選值有 toggle、show 和 hide。

Anchor Positioning 錨點定位詳解

Popover API 解決了彈出層的生命週期管理，但並沒有處理「定位在哪裡」的問題。這就是 Anchor Positioning 登場的時候了。

anchor-name 與 anchor() 函式語法

Anchor Positioning 的核心概念很簡單：先用 anchor-name 把一個元素標記為錨點，再用 anchor() 函式參照這個錨點來定位其他元素。

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

.floating-panel {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

上面的範例讓 .floating-panel 定位在 .trigger-btn 的正下方中央。anchor(bottom) 表示「錨點元素的底邊位置」，anchor(center) 表示「錨點元素的水平中心」。這比起 JavaScript 計算 getBoundingClientRect() 再手動設定 top 和 left 直覺太多了。

position-try-fallbacks 智慧回退機制

浮動元件最麻煩的問題之一是邊界碰撞：tooltip 預設出現在上方，但如果元素靠近視窗頂部怎麼辦？Anchor Positioning 用 position-try-fallbacks 優雅地解決了這個問題：

.tooltip {
  position: fixed;
  position-anchor: --trigger;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  position-try-fallbacks: flip-block, flip-inline;
}

flip-block 會在垂直空間不足時自動翻轉到另一側（上方不夠就跑到下方），flip-inline 則處理水平方向的翻轉。你也可以用 @position-try 定義完全自訂的回退位置，實現更精細的控制。

實戰範例：純 CSS Tooltip

結合 Popover API 和 Anchor Positioning，我們可以打造一個零 JavaScript 的 tooltip：

<button popovertarget="tip" style="anchor-name: --tip-anchor">
  懸停查看
</button>
<div id="tip" popover
  style="position: fixed; position-anchor: --tip-anchor;
         bottom: anchor(top); left: anchor(center);
         translate: -50% -8px;
         position-try-fallbacks: flip-block;">
  這是 tooltip 內容
</div>

這個 tooltip 預設出現在按鈕上方，空間不足時自動翻轉到下方，點擊外部自動關閉。整個實作不需要一行 JavaScript。如果你對更多 CSS 新功能有興趣，可以參考 CSS Scroll-Driven Animations 的捲動動畫實作方式。

實戰範例：Dropdown Menu 下拉選單

Dropdown menu 是 Popover API 最經典的應用場景之一：

<nav>
  <button popovertarget="menu" style="anchor-name: --menu-btn">
    選單 ▾
  </button>
  <ul id="menu" popover
    style="position: fixed; position-anchor: --menu-btn;
           top: anchor(bottom); left: anchor(start);
           margin: 4px 0; min-width: anchor-size(width);">
    <li><a href="#">設定</a></li>
    <li><a href="#">個人資料</a></li>
    <li><a href="#">登出</a></li>
  </ul>
</nav>

注意 anchor-size(width) 這個函式，它能讓下拉選單的最小寬度等於觸發按鈕的寬度，讓視覺比例更協調。搭配 View Transitions API 還能為選單的展開收合加上流暢的過場動畫。

你可以進一步運用 CSS @scope 來限定 dropdown 內部的樣式作用範圍，避免樣式外溢影響其他元件。

瀏覽器支援度與漸進增強策略

截至 2026 年，瀏覽器對這兩個 API 的支援狀況如下：

Popover API：Chrome 114+、Edge 114+、Safari 17+、Firefox 125+，全面支援
Anchor Positioning：Chrome 125+、Edge 125+，Safari 和 Firefox 仍在實作中

由於 Anchor Positioning 的支援度還不是百分之百，建議採用漸進增強的策略：

.tooltip {
  /* 基礎定位 - 所有瀏覽器都能用 */
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

@supports (anchor-name: --a) {
  .tooltip {
    /* 支援 Anchor Positioning 的瀏覽器使用錨點定位 */
    position-anchor: --trigger;
    top: anchor(bottom);
    left: anchor(center);
    translate: -50% 8px;
    transform: none;
  }
}

用 @supports 偵測功能支援度，在不支援的瀏覽器中提供合理的 fallback 體驗。這和 CSS 原生 if() 條件邏輯的漸進增強思路是一致的。

什麼時候還需要 JavaScript 定位函式庫

雖然原生 API 已經很強大，但以下情況你仍然需要 Floating UI 或類似的函式庫：

需要支援舊版瀏覽器：如果你的用戶大量使用 Safari 16 以前或 Firefox 124 以前的版本，Anchor Positioning 無法使用
複雜的定位邏輯：例如需要根據內容尺寸動態調整位置、或是實作 virtual element 定位（如右鍵選單跟隨游標）
動態內容更新：當 popover 內容在顯示後會動態改變尺寸，原生 API 的回退邏輯可能不夠靈活
高度客製化的動畫：entry/exit 動畫如果需要精確控制方向和時間軸，可能還是需要 JavaScript 輔助

對大多數的 UI 元件需求而言，CSS Popover API 加上 Anchor Positioning 已經足夠。建議的策略是：先用原生 API 實作，遇到真正無法解決的場景再引入函式庫。這樣能確保你的應用在效能和維護性上保持最佳狀態。

前端生態正快速朝向「原生優先」的方向發展。從 Popover API、Anchor Positioning、到 Scroll-Driven Animations 和 View Transitions，瀏覽器正在把越來越多原本需要 JavaScript 實作的功能收納進 CSS 標準中。擁抱這些原生能力，不只是追趕技術潮流，更是為了寫出更精簡、更高效、更易維護的程式碼。