,,

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

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

freeflydom

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

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

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

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

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

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

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

核心邏輯如下：

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

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

因?yàn)閭鹘y(tǒng)的 CSS，是沒有辦法改變?cè)氐亩ㄎ桓冈氐哪芰Φ摹?/p>

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

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

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

假設(shè)我們?cè)陧?yè)面上有這么三個(gè)元素：按鈕A、按鈕B、被定位元素C，其中被 元素C 是一個(gè)插入到任意地方，且為絕對(duì)定位的元素，核心 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)在，三個(gè)元素屬于同級(jí)關(guān)系，且 C 元素是絕對(duì)定位，當(dāng)前基于 body 進(jìn)行絕對(duì)定位。

大致樣式如下：

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

下面，我們利用錨點(diǎn)定位去實(shí)現(xiàn)，當(dāng)兩個(gè)按鈕 A、B 被 Hover 的時(shí)候，讓定位元素 C 基于當(dāng)前被 Hover 的按鈕元素進(jìn)行絕對(duì)定位，核心 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 的時(shí)候，改變 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);
}
// 同理，與上面做的事情一致，知識(shí)在 hover 按鈕 B 時(shí)，重新設(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 {
    // 方便動(dòng)圖演示，增加元素過渡動(dòng)畫，非核心代碼
    transition: all .2s;
}

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

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

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

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

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

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

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

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

.context-menu {
  /* 錨點(diǎn)右下角對(duì)齊 */
  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)定位中最為核心的幾個(gè)屬性，掌握了這幾個(gè)屬性，就可以應(yīng)付大部分場(chǎng)景了。在我之前的一篇入門文章中，對(duì)它們也有一些更為詳細(xì)的描述，感興趣的同學(xué)，可以翻看：搶先體驗(yàn)！超強(qiáng)大的 Anchor Positioning 錨點(diǎn)定位

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

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

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

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

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

@position-try 規(guī)則

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

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

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

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

position-try-fallbacks 屬性

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

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

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

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

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

基于上述介紹，我們來實(shí)現(xiàn)一個(gè)基于錨點(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);
}

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

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

@position-try 定義一個(gè)候補(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;
}

這樣，我們?cè)跐L動(dòng)頁(yè)面的過程中，如果彈窗 popover 有超出視窗，候補(bǔ)規(guī)則會(huì)自動(dòng)生效，看看效果：

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

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

當(dāng)然，本文介紹的關(guān)于錨點(diǎn)定位的功能都是基于實(shí)現(xiàn)一個(gè)最小版本的 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)文章

正在查詢...