僅使用幾行 CSS 和 HTML，就能創建交互式的網頁組件，如工具提示（tooltip）、懸浮卡片（hover card）或彈出框（popover），無需編寫 JavaScript 或使用復雜的布局技巧。

聽起來是不是超棒？

接下來，我們一起看看它是如何實現的。

CSS Anchor API 是什么？

CSS Anchor API 提供了一種全新的方式，讓元素可以 根據特定的錨點（Anchor）進行動態定位，而不必再依賴 JavaScript 或復雜的 CSS 技巧。

在過去，實現類似的功能通常需要編寫大量代碼。例如，我們希望某個 工具提示始終跟隨按鈕，那么就需要手動計算位置、處理滾動問題，還要監聽各種事件。

而 CSS Anchor API 讓這一切變得異常簡單，只需少量 CSS 代碼就能搞定。

傳統方法：過去的繁瑣實現

假設我們要在按鈕上懸浮時顯示工具提示，在以前，我們可能會這樣做：

<button id="myButton">Hover me</button>
<div id="tooltip">I’m a tooltip!</div>

#tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

const button = document.getElementById('myButton');
const tooltip = document.getElementById('tooltip');

button.addEventListener('mouseover', () => {
  const rect = button.getBoundingClientRect();
  tooltip.style.display = 'block';
  tooltip.style.top = `${rect.bottom + window.scrollY}px`;
  tooltip.style.left = `${rect.left + window.scrollX}px`;
});

button.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

???? 太復雜了！ 僅僅是對齊一個小小的工具提示，就需要手動計算元素位置、處理滾動影響，還要綁定事件監聽器。

全新方式：CSS Anchor API 一步到位！

有了 CSS Anchor API，我們可以用 更少的代碼 輕松實現同樣的效果：

<button popover-anchor="tooltip">Hover me</button>
<div popover id="tooltip">I’m a tooltip!</div>

[popover-anchor] {
  position: relative;
}

[popover] {
  position: anchor;
  anchor-name: tooltip;
  anchor-offset: 0 8px; /* 在錨點下方偏移 8px */
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

button:hover + [popover] {
  display: block; /* 當鼠標懸停時顯示 */
}

圖片

就這樣，完全不需要 JavaScript，僅通過 CSS 就能實現錨點定位，告別復雜的手動計算！

核心原理解析

CSS Anchor API 通過以下幾個關鍵屬性來實現動態定位：

• position: anchor; —— 讓元素基于指定的錨點進行定位。
• anchor-name: tooltip; —— 讓元素和某個錨點建立關聯。
• anchor-offset: 0 8px; —— 定義 水平和垂直方向的偏移量（這里是向下偏移 8px）。

無論頁面如何滾動，工具提示都能保持正確位置，無需額外的 JavaScript 邏輯。

CSS Anchor API 支持的關鍵屬性

以下是 CSS Anchor API 提供的主要功能：

CSS Anchor API 的優勢

1?? 極簡代碼 —— 只需幾行 CSS，就能完成過去需要幾十行 JavaScript 才能實現的功能。

2?? 更高性能 —— 讓瀏覽器 原生 計算布局，減少 JavaScript 開銷，提高頁面流暢度。

3?? 更易維護 —— 代碼更加簡潔，不需要手動管理 getBoundingClientRect() 或監聽滾動事件。

4?? 瀏覽器原生支持 —— 讓 UI 更穩定，不容易受到不同設備或瀏覽器行為差異的影響。

更多實戰案例：帶交互的 Popover 菜單

Anchor API 也能用于更復雜的場景，比如 彈出菜單：

<button popover-anchor="popoverMenu">Click me</button>
<div popover id="popoverMenu">
  <ul>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

[popover-anchor] {
  position: relative;
}

[popover] {
  position: anchor;
  anchor-name: popoverMenu;
  anchor-offset: 0 12px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 10px;
}

button:hover + [popover] {
  display: block;
}

圖片

這樣，一個 完全基于 CSS 的交互式 Popover 就完成了！??

瀏覽器支持情況

目前，Chrome、Edge 和 Opera 已支持 CSS Anchor API，而 Firefox 和 Safari 仍在落后。對于 Apple 設備的開發者來說，可能需要等待 Safari 未來的更新。

image.png

為什么 CSS Anchor API 是 Web 開發的一次革命？

在 Web 開發中，越簡單的實現方式往往意味著更高的開發效率。

CSS Anchor API 讓動態定位變得前所未有的簡單，不僅讓代碼更加精簡，還能確保交互組件在各種設備上保持一致的表現。

以后再需要實現工具提示、彈出框、懸浮卡片時，一定要試試 CSS Anchor API！