,,

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

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2025年3月3日 9:2 本文熱度 1123

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

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

在本文中，我們將使用錨點(diǎn)定位，實(shí)現(xiàn)一個簡化版本的 Popover 功能。下面，我們將一起一探究竟。

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

如果我們將彈出層的 DOM 結(jié)構(gòu)，寫在某個具體的元素內(nèi)部，譬如放在與被 Hover 元素同級。如果被 Hover 元素的祖先元素的某一層設(shè)置了 overflow: hidden，則可能會出現(xiàn)這種截斷現(xiàn)象：

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

核心邏輯如下：

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

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

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

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

快速了解 Anchor Positioning 錨點(diǎn)定位

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

假設(shè)我們在頁面上有這么三個元素：按鈕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;
}

現(xiàn)在，三個元素屬于同級關(guān)系，且 C 元素是絕對定位，當(dāng)前基于 body 進(jìn)行絕對定位。

大致樣式如下：

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

下面，我們利用錨點(diǎn)定位去實(shí)現(xiàn)，當(dāng)兩個按鈕 A、B 被 Hover 的時候，讓定位元素 C 基于當(dāng)前被 Hover 的按鈕元素進(jìn)行絕對定位，核心 CSS 代碼如下：


.btn-a {
    // 將元素聲明為定位基準(zhǔn)點(diǎn)，命名為 --btn-a
    anchor-name: --btn-a;
}
.btn-b {
    // 將元素聲明為定位基準(zhǔn)點(diǎn)，命名為 --btn-b
    anchor-name: --btn-b;
}
// 當(dāng)元素被 hover 的時候，改變 C 元素的樣式
.btn-a:hover ~ .anchor {
    // 錨點(diǎn)綁定，建立元素與錨點(diǎn)的定位關(guān)系 
    position-anchor: --btn-a;
    // 基于新的錨點(diǎn)元素，設(shè)置元素的 left\top 屬性
    left: anchor(--btn-a center);
    top: anchor(--btn-a bottom);
    // 利用 transform 輕微調(diào)整定位，非核心代碼
    transform: translate(-50%, 5px);
}
// 同理，與上面做的事情一致，知識在 hover 按鈕 B 時，重新設(shè)定錨點(diǎn)元素
.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;
}

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

如此一來，我們就實(shí)現(xiàn)了動態(tài)改變 C 元素定位基準(zhǔn)的能力，我們看看效果：

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

Anchor Positioning 錨點(diǎn)定位核心 API

（1）anchor-name：錨點(diǎn)定義

功能：將元素聲明為定位基準(zhǔn)點(diǎn)
語法：anchor-name: <dashed-ident>;
應(yīng)用場景：觸發(fā)元素、參考元素、動態(tài)定位源

/* 定義觸發(fā)元素為錨點(diǎn) */
.trigger-btn {
  anchor-name: --menu-anchor;
}

（2）position-anchor：錨點(diǎn)綁定

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

.tooltip {
  position: fixed;
  position-anchor: --menu-anchor; /* 綁定到指定錨點(diǎn) */
}

（3）anchor()：動態(tài)定位

功能：根據(jù)錨點(diǎn)位置計算坐標(biāo)
語法：anchor(<anchor-name>? <anchor-side>)
方位參數(shù)：

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

.context-menu {
  /* 錨點(diǎn)右下角對齊 */
  top: anchor(--ctx-anchor bottom);
  left: anchor(--ctx-anchor right);
}
.tooltip {
  /* 水平居中于錨點(diǎn) */
  left: anchor(center);
  right: anchor(center);
}

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

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

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

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

錨點(diǎn)定位的候補(bǔ)位置

還有一個非常重要的點(diǎn)，傳統(tǒng)的 Popover 組件，一般都會有這么個功能 -- 智能邊界處理。

我們以一個功能比較強(qiáng)大的 Popover 庫 floating-ui 舉例，其官網(wǎng)展示了如下的一個功能，當(dāng)元素在滾動過程中，如果原本 Popover 彈窗被遮擋，會自動進(jìn)行位置移動，將彈窗重新調(diào)整到可視區(qū)域，效果如下：

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

這里，我們主要借助兩個錨點(diǎn)定位相關(guān)的屬性完成錨點(diǎn)定位的候補(bǔ)位置 position-try-fallbacks 和 @position-try 規(guī)則。

@position-try 規(guī)則

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

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

關(guān)鍵點(diǎn)：

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

position-try-fallbacks 屬性

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

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

關(guān)鍵點(diǎn)：

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

使用錨點(diǎn)定位實(shí)現(xiàn)候補(bǔ)位置

基于上述介紹，我們來實(shí)現(xiàn)一個基于錨點(diǎn)定位的候補(bǔ)位置。

假設(shè)我們?nèi)缦陆Y(jié)構(gòu)，當(dāng)前已經(jīng)使用了錨點(diǎn)定位：

<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 錨點(diǎn)定位，使其絕對定位的父元素是 .btn，并且，定位在按鈕的下方，效果如下：

此時，我們只需要再借助 position-try-fallbacks 和 @position-try，實(shí)現(xiàn)候補(bǔ)位置：

@position-try 定義一個候補(bǔ)規(guī)則
position-try-fallbacks 引入候補(bǔ)規(guī)則

核心 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 有超出視窗，候補(bǔ)規(guī)則會自動生效，看看效果：

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

綜上所述，到今天，我們已經(jīng)可以利用 CSS 錨點(diǎn)定位大致實(shí)現(xiàn)一個極簡版的 Popover 彈窗，并且可以滿足大部分場景。不得不感嘆 CSS 確實(shí)愈發(fā)的強(qiáng)力，

當(dāng)然，本文介紹的關(guān)于錨點(diǎn)定位的功能都是基于實(shí)現(xiàn)一個最小版本的 Popover 展開的，基于錨點(diǎn)定位的 API 和回退候補(bǔ)，還有更多有趣的內(nèi)容，感興趣的可以猛戳 MDN 進(jìn)行了解：MDN - Anchor Positioning、MDN-Anchor Positioning @position try。

轉(zhuǎn)自https://www.cnblogs.com/coco1s/p/18739625

該文章在 2025/3/3 9:03:11 編輯過

關(guān)鍵字查詢

CSS

瀏覽

定位

瀏覽器

相關(guān)文章

正在查詢...