CSS Anchor Positioning重新定義錨點定位的時代來臨(最新推薦)
我要評論?? CSS Anchor Positioning：重新定義「錨定定位」的時代來了！
你是否在做 Tooltip、Popper、氣泡卡片時，被繁雜的定位計算和 JS 邏輯折磨？CSS Anchor Positioning 正式登場，用純 CSS 的方式精確「錨定」任意元素，一次性解決層疊、滾動、居中等定位痛點！
?? 什么是 Anchor Positioning？
CSS Anchor Positioning 是一項仍在草案中的新特性，由 Chrome 125 開始提供原生支持（需啟用實驗 flag）。它允許你在 CSS 中通過錨點（anchor）來相對于任意 DOM 元素定位，而不是傳統(tǒng)的父級元素。
就像
position: absolute的終極進化版本。
?? 它解決了哪些痛點？
- ? 彈出層的定位：Tooltip、菜單、卡片等，無需 JS 計算偏移；
- ? 自動適應(yīng)視窗滾動：內(nèi)建防止遮擋邏輯；
- ? 任意錨定目標(biāo)：不僅限于父元素；
- ? 支持多錨點選擇、優(yōu)先級設(shè)置等；
?? 實戰(zhàn)演示：實現(xiàn)一個純 CSS 的 Tooltip
??? 先上效果圖！
? HTML 結(jié)構(gòu)
<!-- html --> <div class="anchor">??</div> <p class="positionedElement">This is a positioned element.</p>
?? CSS 樣式
/* css */
:root {
--anchor-width: 60px;
--anchor-height: 90px;
}
.anchor {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// 主要實現(xiàn)部分！
anchor-name: --infobox;
background: palegoldenrod;
font-size: 3em;
width: var(--anchor-width);
height: var(--anchor-height);
border: 1px solid goldenrod;
text-align: center;
}
.positionedElement {
display: none;
position: absolute;
// 主要實現(xiàn)部分！
position-anchor: --infobox;
margin: 0;
top: anchor(top);
left: anchor(right);
bottom: anchor(bottom);
background-color: olive;
transform: translate(calc(var(--anchor-width)/2 * -1), calc(var(--anchor-height)/2 * -1));
border: 1px solid darkolivegreen;
}??javascript
// 可以看到我的js中沒有任何的關(guān)于位置計算的代碼！
const tip = document.querySelector('.positionedElement')
const anchor = document.querySelector('.anchor')
anchor.addEventListener('mouseenter', () => {
tip.style.display = 'block'
})
anchor.addEventListener('mouseleave', () => {
tip.style.display = 'none'
})?? 利用 anchor() 函數(shù)直接“鎖定”另一個元素的位置。position-anchor 可綁定任意錨點。
?? 說明：
anchor-name定義錨點；position-anchor綁定錨點;anchor()使用已經(jīng)定義好的錨點的位置；全程無 JS 計算偏移！
?? 瀏覽器兼容性（截至 2025 年 6 月）
| 瀏覽器 | 支持情況 |
|---|---|
| Chrome 125+ | ? 實驗開啟（部分已經(jīng)默認開啟） |
| Safari | ?? 尚未支持 |
| Firefox | ?? 尚未支持 |
| Edge | ? 同 Chrome |
?? 可在 chrome://flags/#enable-anchor-positioning 中啟用實驗（如果沒找到對應(yīng)的開啟選項，那么可能已經(jīng)默認開啟）。
?? 進階玩法
- 支持
fallback()自動選擇備用定位； - 支持
anchor(top center)精細錨定； - 可結(jié)合
@position-try指令控制定位策略（與 Popover API 搭配）； - 更高自由度的浮層管理邏輯！
?? 總結(jié)
CSS Anchor Positioning 是前端定位機制的一次飛躍，將原本依賴 JS 邏輯的工作交還給 CSS 實現(xiàn)，大大簡化了彈出層、提示框等組件的開發(fā)。
未來，當(dāng)它全面落地，你的前端彈層邏輯無需任何的js計算！?。?/strong>
相關(guān)文章
如何使用CSS的object-position實現(xiàn)圖片在img標(biāo)簽中的定位
該文章介紹了CSS中的object-position屬性,用于精確控制替換元素在容器內(nèi)的位置,通過指定水平和垂直方向的偏移量,可以實現(xiàn)精準定位2024-11-08
css3實現(xiàn)類似地圖定位循環(huán)擴散光圈效果(最新推薦)
這篇文章主要介紹了css3實現(xiàn)類似地圖定位循環(huán)擴散光圈效果,本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2024-05-24CSS實現(xiàn)dom脫離文檔流定位固定位置的操作代碼
在CSS中，要使一個DOM元素脫離正常的文檔流并定位在頁面的右頂部，你可以使用position屬性，這篇文章主要介紹了CSS實現(xiàn)dom脫離文檔流定位固定位置,需要的朋友可以參考下2024-04-30
這篇文章主要為大家詳細介紹了CSS中五種常見定位方式以及它們的具體應(yīng)用，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以跟小編一起學(xué)習(xí)一下2024-04-22
CSS盒模型是用來描述HTML元素在頁面中所占空間的模型，每個元素都被看作是一個矩形的盒子，包含內(nèi)容區(qū)域、內(nèi)邊距、邊框和外邊距四個部分，這篇文章主要介紹了CSS盒模型、浮2023-07-27
在頁面上定位內(nèi)容時，可以使用一些屬性來幫助您操縱元素的位置，本文主要介紹了使用CSS定位HTML元素的實現(xiàn)方法，主要有五種類型，感興趣的可以了解一下2022-07-05
這篇文章主要介紹了css錨點定位被頂部固定導(dǎo)航欄遮住的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-04-09
CSS中定位有四種在不同的場景下有不同的作用，本文給大家介紹關(guān)于CSS中定位的相關(guān)知識，通過實例代碼截圖給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值2020-03-20純CSS實現(xiàn)網(wǎng)頁內(nèi)部錨點跳轉(zhuǎn)時上下偏移的示例代碼
這篇文章主要介紹了純CSS實現(xiàn)網(wǎng)頁內(nèi)部錨點跳轉(zhuǎn)時上下偏移的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨2020-04-09
