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

聽起來是不是超棒？

接下來，我們一起看看它是如何實(shí)現(xiàn)的。

CSS Anchor API 是什么？

CSS Anchor API 提供了一種全新的方式，讓元素可以 根據(jù)特定的錨點(diǎn)（Anchor）進(jìn)行動態(tài)定位，而不必再依賴 JavaScript 或復(fù)雜的 CSS 技巧。

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

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

傳統(tǒng)方法：過去的繁瑣實(shí)現(xiàn)

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

<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';
});

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

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

有了 CSS Anchor API，我們可以用 更少的代碼 輕松實(shí)現(xiàn)同樣的效果：

<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; /* 在錨點(diǎn)下方偏移 8px */
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
}

button:hover + [popover] {
  display: block; /* 當(dāng)鼠標(biāo)懸停時(shí)顯示 */
}

圖片

就這樣，完全不需要 JavaScript，僅通過 CSS 就能實(shí)現(xiàn)錨點(diǎn)定位，告別復(fù)雜的手動計(jì)算！

核心原理解析

CSS Anchor API 通過以下幾個關(guān)鍵屬性來實(shí)現(xiàn)動態(tài)定位：

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

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

CSS Anchor API 支持的關(guān)鍵屬性

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

CSS Anchor API 的優(yōu)勢

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

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

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

4?? 瀏覽器原生支持 —— 讓 UI 更穩(wěn)定，不容易受到不同設(shè)備或?yàn)g覽器行為差異的影響。

更多實(shí)戰(zhàn)案例：帶交互的 Popover 菜單

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

<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 設(shè)備的開發(fā)者來說，可能需要等待 Safari 未來的更新。

image.png

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

在 Web 開發(fā)中，越簡單的實(shí)現(xiàn)方式往往意味著更高的開發(fā)效率。

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

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