瀏覽器原生「磁吸」效果！Anchor Positioning 錨點(diǎn)定位神器解析
從 Chrome 125 開始，支持了一個(gè)全新的 CSS 特性 - Anchor Positioning，翻譯過來即是錨點(diǎn)定位。
在之前的文章中，我們較為系統(tǒng)的講述了這個(gè)新特性的使用，感興趣的可以翻開一下前文：搶先體驗(yàn)！超強(qiáng)大的 Anchor Positioning 錨點(diǎn)定位[1]。
在本文中，我們將使用錨點(diǎn)定位，實(shí)現(xiàn)一個(gè)簡(jiǎn)化版本的 Popover 功能。下面，我們將一起一探究竟。
傳統(tǒng) Popover 功能
長話短說，在日常的前端需求開發(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，插入到頁面最外層的 <body> 容器之下，再通過實(shí)時(shí)計(jì)算位置，將該彈出層定位到被 hover 元素附近。這也就是類似于 popper.js[2]、Tippy.js[3] 等傳統(tǒng)庫所干的事情。
核心邏輯如下：
- 通過 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è)陧撁嫔嫌羞@么三個(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)定位[4]。
錨點(diǎn)定位的候補(bǔ)位置
還有一個(gè)非常重要的點(diǎn)，傳統(tǒng)的 Popover 組件，一般都會(huì)有這么個(gè)功能 -- 智能邊界處理。
我們以一個(gè)功能比較強(qiáng)大的 Popover 庫 floating-ui[5] 舉例，其官網(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)頁面的過程中，如果彈窗 popover 有超出視窗，候補(bǔ)規(guī)則會(huì)自動(dòng)生效，看看效果：
仔細(xì)觀察，和上面利用 Javascript 庫實(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[6]、MDN-Anchor Positioning @position try[7]。
最后
好了，本文到此結(jié)束，一個(gè)非常有意思的通過 CSS 拼接/裁剪/遮罩方式得到內(nèi)凹圓角的技巧，希望本文對(duì)你有所幫助 :)
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[8] 。
參考資料
[1]搶先體驗(yàn)！超強(qiáng)大的 Anchor Positioning 錨點(diǎn)定位: https://github.com/chokcoco/iCSS/issues/239。
[2]popper.js: https://github.com/floating-ui/floating-ui。
[3]Tippy.js: https://atomiks.github.io/tippyjs/。
[4]搶先體驗(yàn)！超強(qiáng)大的 Anchor Positioning 錨點(diǎn)定位: https://github.com/chokcoco/iCSS/issues/239。
[5]floating-ui: https://floating-ui.com/。
[6]MDN - Anchor Positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning。
[7]MDN-Anchor Positioning @position try: https://developer.mozilla.org/en-US/docs/Web/CSS/@position-try。
[8]Github -- iCSS: https://github.com/chokcoco/iCSS。
