CSS 錨點定位簡介與範例

介紹

在 Web 開發中，相對於特定參考元素（錨點）定位浮動元素（例如工具提示、彈出視窗、下拉式選單和懸停卡）歷來是一項複雜的挑戰。

為了使浮動元素在視窗大小調整或頁面滾動時跟隨錨點積分，開發人員傳統上依靠連續的 JavaScript 座標計算（使用 getBoundingClientRect()）來動態更改內聯樣式。因此，像 Popper.js 或 Floating UI 這樣的函式庫成為了業界標準。但是，在滾動事件期間在主執行緒上執行腳本循環經常會導致渲染延遲和卡頓，尤其是在行動裝置上。

CSS 錨定位 API 透過在瀏覽器中本機處理浮動座標來解決這些缺點。在本指南中，我們將探索該標準的核心功能並逐步介紹實用的 UI 配方。

1.什麼是CSS錨點定位？

CSS 錨定位是一種原生樣式標準，可讓您完全使用 CSS 將絕對或固定位置元素（目標）直接錨定到另一個元素（錨）。

核心優勢

零 JavaScript： 消除了調整大小偵聽器、滾動事件觀察器和自訂座標計算邏輯的需求。
卓越的性能： 位置更新和渲染直接卸載到瀏覽器的合成器線程，以 60+ FPS 渲染流暢的視覺更新。
佈局隔離： 絕對或固定目標元素可以繞過父邊界剪切約束（例如 overflow: hidden），尤其是與 HTML <dialog> 元素或本機 popover 屬性配對時。

2. 基本設定和語法

讓我們來看看將工具提示容器綁定到按鈕元素的基本設定。

HTML結構

我們聲明一個錨元素（按鈕）及其目標浮動容器（div）。

<button class="my-anchor">Hover over me</button>
<div class="my-tooltip">This is a native CSS tooltip</div>

CSS 實現

為了在 CSS 中將元素連結在一起，我們遵循三個步驟：

在引用錨元素上聲明唯一的 anchor-name 識別碼。
定義 position: absolute 並在目標上使用 position-anchor 引用標識符。
透過 anchor() 定位功能對齊座標。

/* 1. Set up the Anchor */
.my-anchor {
  /* Anchor names must be formatted as dashed identifiers, similar to CSS custom properties */
  anchor-name: --anchor-button;
}

/* 2 & 3. Format the Target */
.my-tooltip {
  position: absolute;
  position-anchor: --anchor-button;

  /* Pin the top of the tooltip to the bottom boundary of the anchor button */
  top: anchor(bottom);
  /* Place the horizontal center of the tooltip to the center of the anchor */
  left: anchor(center);
  transform: translateX(-50%);

  /* Styling defaults */
  background: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
}

只需幾行 CSS，工具提示就可以直接捕捉到按鈕下方。即使使用者捲動文檔，佈局引擎也會自動更新位置。

3. 使用位置嘗試處理邊緣約束

浮動組件的一個主要問題是視口邊緣的裁切。如果錨點按鈕位於螢幕底部附近，則將工具提示放置在其下方會強制其離開螢幕。

CSS 錨點定位使用 position-try-fallbacks 動態處理視窗碰撞。

.my-tooltip {
  position: absolute;
  position-anchor: --anchor-button;

  /* Preferred placement */
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);

  /* Define fallback positions when default bounds collide with viewport edges */
  position-try-fallbacks: flip-block, flip-inline;
}

flip-block： 如果沒有足夠的空間，則自動翻轉垂直對齊（例如，將工具提示放置在錨點上方而不是下方）。
flip-inline: 如果工具提示被左或右視口邊界切斷，則移動水平位置。

您也可以使用 @position-try 指令編寫自訂佈局：

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

當與 HTML5 Popover API（popover 屬性） 配合使用時，CSS 錨點定位變得異常強大。

Popover API 可讓您將元素推送到文件堆疊的頂層，而無需使用 JS。然而，由於頂層元素存在於常規文件佈局流程之外，因此將它們錨定在常規按鈕旁邊過去很困難。

錨定定位彌補了這一差距：

<!-- Interactive Popover Hook -->
<button class="menu-btn" popovertarget="my-menu" style="anchor-name: --menu-anchor;">
  Open Menu
</button>

<div popover id="my-menu" style="
  position: absolute;
  position-anchor: --menu-anchor;
  top: anchor(bottom);
  left: anchor(left);
  margin: 0;
">
  <ul>
    <li>Dashboard</li>
    <li>Settings</li>
    <li>Log out</li>
  </ul>
</div>