瀏覽器原生「磁吸」效果！Anchor Positioning 錨點定位神器解析

從 Chrome 125 開始，支持了一個全新的 CSS 特性 - Anchor Positioning，翻譯過來即是錨點定位。

在之前的文章中，我們較為系統的講述了這個新特性的使用，感興趣的可以翻開一下前文：搶先體驗！超強大的 Anchor Positioning 錨點定位。

在本文中，我們將使用錨點定位，實現一個簡化版本的 Popover 功能。下面，我們將一起一探究竟。

長話短說，在日常的前端需求開發中，有這么一種場景，我們需要 hover 某個具體元素，以彈出一個彈出層，像是這樣：

如果我們將彈出層的 DOM 結構，寫在某個具體的元素內部，譬如放在與被 Hover 元素同級。如果被 Hover 元素的祖先元素的某一層設置了 overflow: hidden，則可能會出現這種截斷現象：

為了避免這種情況的發生，一般情況下，常見的解決方案都是會將彈出層的 DOM，插入到頁面最外層的 <body> 容器之下，再通過實時計算位置，將該彈出層定位到被 hover 元素附近。這也就是類似于 popper.js、Tippy.js 等傳統庫所干的事情。

核心邏輯如下：

通過 JavaScript 獲取觸發元素的位置信息（getBoundingClientRect）
計算視口剩余空間（需考慮滾動位置、窗口尺寸等）
動態調整 Popover 位置（需處理邊界碰撞、翻轉邏輯）
添加 resize/scroll 事件監聽器進行位置修正

其核心在于，通過 Javascript 動態計算當前 hover 元素的位置，將彈出層定位到當前 hover 元素附近合適的位置，并且處理好各種邊界場景，這里很重要一點是強依賴于 Javascript 的計算。

因為傳統的 CSS，是沒有辦法改變元素的定位父元素的能力的。

而有趣的是，全新的 CSS 特性 - Anchor Positioning 錨點定位就是為了解決這個問題的。

快速了解 Anchor Positioning 錨點定位

那，到底什么是 Anchor Positioning 錨點定位呢？我們通過一個 DEMO 快速上手。

假設我們在頁面上有這么三個元素：按鈕A、按鈕B、被定位元素C，其中被 元素C 是一個插入到任意地方，且為絕對定位的元素，核心 CSS 代碼如下：

<body>
  <div class="btn-a">按鈕A</div>
  <div class="btn-b">按鈕B</div>
  <div class="anchor">被定位元素C</div>
</div>

.btn-a, .btn-b {
    // 高寬各類樣式
}
.anchor {
    position: absolute;
}

現在，三個元素屬于同級關系，且 C 元素是絕對定位，當前基于 body 進行絕對定位。

大致樣式如下：

而錨點定位的屬性的核心作用就是，能夠改變元素定位的基準，增強元素的絕對定位的能力。Anchor Positioning（錨點定位）允許我們基于其它錨點元素的位置和尺寸去定位上下文，而不是傳統意義上的基于父元素去進行絕對定位。

下面，我們利用錨點定位去實現，當兩個按鈕 A、B 被 Hover 的時候，讓定位元素 C 基于當前被 Hover 的按鈕元素進行絕對定位，核心 CSS 代碼如下：


.btn-a {
    // 將元素聲明為定位基準點，命名為 --btn-a
    anchor-name: --btn-a;
}

.btn-b {
    // 將元素聲明為定位基準點，命名為 --btn-b
    anchor-name: --btn-b;
}

// 當元素被 hover 的時候，改變 C 元素的樣式
.btn-a:hover ~ .anchor {
    // 錨點綁定，建立元素與錨點的定位關系 
    position-anchor: --btn-a;
    // 基于新的錨點元素，設置元素的 left\top 屬性
    left: anchor(--btn-a center);
    top: anchor(--btn-a bottom);
    // 利用 transform 輕微調整定位，非核心代碼
    transform: translate(-50%, 5px);
}

// 同理，與上面做的事情一致，知識在 hover 按鈕 B 時，重新設定錨點元素
.btn-b:hover ~ .anchor {
    position-anchor: --btn-b;
    left: anchor(--btn-b center);
    top: anchor(--btn-b bottom);
    transform: translate(-50%, 5px);
}

.anchor {
    // 方便動圖演示，增加元素過渡動畫，非核心代碼
    transition: all .2s;
}

核心關注上面的 anchor-name、position-anchor、 anchor 幾個屬性，其作用和含義在注釋中有說明，在下文還會再描述一次。

如此一來，我們就實現了動態改變 C 元素定位基準的能力，我們看看效果：

簡單而言，我們利用錨點定位的能力，在 hover 按鈕 A\B 的時候，把 C 元素定位在它們正下方。這個就是錨點定位的能力！

Anchor Positioning 錨點定位核心 API

（1）anchor-name：錨點定義

功能：將元素聲明為定位基準點
語法：anchor-name: <dashed-ident>;
應用場景：觸發元素、參考元素、動態定位源

/* 定義觸發元素為錨點 */
.trigger-btn {
  anchor-name: --menu-anchor;
}

（2）position-anchor：錨點綁定

功能：建立元素與錨點的定位關系
語法：position-anchor: <dashed-ident>;
注意：需配合定位屬性（position: fixed/absolute）使用

.tooltip {
  position: fixed;
  position-anchor: --menu-anchor; /* 綁定到指定錨點 */
}

（3）anchor()：動態定位

功能：根據錨點位置計算坐標
語法：anchor(<anchor-name>? <anchor-side>)
方位參數：

垂直：top/center/bottom
水平：left/center/right
組合：top-left/bottom-right 等

.context-menu {
  /* 錨點右下角對齊 */
  top: anchor(--ctx-anchor bottom);
  left: anchor(--ctx-anchor right);
}

.tooltip {
  /* 水平居中于錨點 */
  left: anchor(center);
  right: anchor(center);
}

（4）anchor-size()：尺寸繼承

功能：獲取錨點元素的尺寸值
語法：anchor-size(<anchor-name>? <dimension>)
維度參數：width/height/block/inline

.popover {
  /* 繼承錨點寬度 */
  width: anchor-size(width);
  
  /* 最小高度為錨點高度的1.5倍 */
  min-height: calc(anchor-size(height) * 1.5);
}

這里介紹了錨點定位中最為核心的幾個屬性，掌握了這幾個屬性，就可以應付大部分場景了。在我之前的一篇入門文章中，對它們也有一些更為詳細的描述，感興趣的同學，可以翻看：搶先體驗！超強大的 Anchor Positioning 錨點定位

錨點定位的候補位置

還有一個非常重要的點，傳統的 Popover 組件，一般都會有這么個功能 -- 智能邊界處理。

我們以一個功能比較強大的 Popover 庫 floating-ui 舉例，其官網展示了如下的一個功能，當元素在滾動過程中，如果原本 Popover 彈窗被遮擋，會自動進行位置移動，將彈窗重新調整到可視區域，效果如下：

令人振奮的是，現在，CSS 的 Anchor Positioning 錨點定位同樣支持這種 智能邊界處理，在錨點定位中，我們稱之為候補位置。

這里，我們主要借助兩個錨點定位相關的屬性完成錨點定位的候補位置 position-try-fallbacks 和 @position-try 規則。

@position-try 規則

@position-try 用于定義一個備選定位策略（一組定位規則），可以在多個元素中復用。它的語法類似于定義一個命名規則集合。

/* 語法示例：*/
@position-try --strategy-name {
  /* 具體的定位規則 */
  top: anchor(bottom);
  left: anchor(left);
}

關鍵點：

命名策略：每個 @position-try 規則需要唯一名稱（如 --tooltip-below）。
獨立作用域：策略內部的定位規則獨立于元素自身的樣式，僅在被調用時生效。

position-try-fallbacks 屬性

position-try-fallbacks 用于在元素上指定備選定位策略的優先級順序。瀏覽器會按順序嘗試這些策略，直到找到第一個可用的位置。

/* 語法示例：*/
.element {
  position-try-options: --strategy1, --strategy2, --strategy3;
}

關鍵點：

順序敏感：瀏覽器按列表順序嘗試策略，第一個可行的策略會被應用。
動態回退：如果所有策略均不可行，元素會回退到默認定位（或父容器約束）。

使用錨點定位實現候補位置

基于上述介紹，我們來實現一個基于錨點定位的候補位置。

假設我們如下結構，當前已經使用了錨點定位：

<body>
  <div class="btn">Reference</div>
  <div class="anchor">Popover彈窗元素</div>
</div>

核心 CSS 如下：

.btn {
    anchor-name: --btn;
    border: 1px dashed #000;
    background: #ddd;
}

.anchor {
    position: absolute;
    position-anchor: --btn;
    left: anchor(--btn-a center);
    top: anchor(--btn-a bottom);
    transform: translate(-50%, 5px);
}

此時，兩個元素都插入在 <body> 下面，但是 Popover 彈窗元素使用了 position-anchor: --btn 錨點定位，使其絕對定位的父元素是 .btn，并且，定位在按鈕的下方，效果如下：

此時，我們只需要再借助 position-try-fallbacks 和 @position-try，實現候補位置：

@position-try 定義一個候補規則
position-try-fallbacks 引入候補規則

核心 CSS 代碼如下：

.btn {
    anchor-name: --btn;
    border: 1px dashed #000;
    background: #ddd;
}

.anchor {
    position: absolute;
    position-anchor: --btn;
    left: anchor(--btn-a center);
    top: anchor(--btn-a bottom);
    transform: translate(-50%, 5px);
    position-try-fallbacks: --position-bottom;
}

@position-try --position-bottom {
    left: anchor(--btn center);
    bottom: anchor(--btn top);
    top: unset;
    margin-bottom: 10px;
}

這樣，我們在滾動頁面的過程中，如果彈窗 popover 有超出視窗，候補規則會自動生效，看看效果：

仔細觀察，和上面利用 Javascript 庫實現的智能定位，效果一致，只是此時，我們僅僅使用了寥寥幾行 CSS 代碼！Amazing！

綜上所述，到今天，我們已經可以利用 CSS 錨點定位大致實現一個極簡版的 Popover 彈窗，并且可以滿足大部分場景。不得不感嘆 CSS 確實愈發的強力，

當然，本文介紹的關于錨點定位的功能都是基于實現一個最小版本的 Popover 展開的，基于錨點定位的 API 和回退候補，還有更多有趣的內容，感興趣的可以猛戳 MDN 進行了解：MDN - Anchor Positioning、MDN-Anchor Positioning @position try。

最后

好了，本文到此結束，一個非常有意思的 CSS 技巧，希望本文對你有所幫助 ??

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??

更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

posted @ 2025-02-26 21:00 ChokCoco 閱讀(2089) 評論(5) 收藏舉報

刷新頁面返回頂部

ChokCoco

經不住流年似水, 逃不過此間少年