本文主要是介绍CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需...
CSS Anchor Positioning：重新定义「锚定定位」的时代来了！
你是否在做 Tooltip、Popper、气泡卡片时，被繁杂的定位计算和 js 逻辑折磨？CSS Anchor Positioning 正式登场，用纯 CSS 的方式精确「锚定」任意元素，一次性解决层叠、滚动、居中等定位痛点！
什么是 Anchor Positioning？
CSS Anchor Positioning 是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持（需启用实验 flag）。它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位，而不是传统的父级元素。
就像
position: absolute的终极进化版本。
它解决了哪些痛点？
- ✅ 弹出层的定位：Tooltip、菜单、卡片等，无需 JS 计算偏移；
- ✅ 自动适应视窗滚动：内建防止遮挡逻辑；
- ✅ 任意锚定目标：不仅限于父元素；
- ✅ 支持多锚点选择、优先级设置等；
实战演示：实现一个纯 CSS 的 Tooltip
️ 先上效果图！
✅ html 结构
<!-- html --> <div class="anchor">⚓︎</div> <p class="positionedElement">This is a positioned element.</p>
CSS 样式
/* css */
:root {
-php-anchohttp://www.chinasem.cnr-width: 60px;
--anchor-height: 90px;
}
.anchor {
positiwww.chinasem.cnon: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// 主要实现部分！
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;
// 主要实现部分！
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中没有任何的关于位置计算的代码！
const tip = document.querySelector('.positionedElement')
const anchor = document.querySelector('.anchor')
anchor.addEventListener('mouseenter', () => {
tip.style.display = 'block'
})
anchor.addEventListener('mouseleave', () =www.chinasem.cn> {
tip.style.display = 'none'
}) 利用 anchor() 函数直接“锁定”另一个元素的位置。position-anchor 可绑定任意锚点。
说明：
anchor-name定义锚点；position-anchor绑定锚点;anchor()使用已经定义好的锚点的位置；全程无 JS 计算偏移！
浏览器兼容性（截至 2025 年 6 月）
| 浏览器 | 支持情况 |
|---|---|
| Chrome 125+ | ✅ 实验开启（部分已经默认开启） |
| Safari | 尚未支持 |
| Firefox | 尚未支持 |
| Edge | ✅ 同 Chrome |
可在 chrome://flags/#enable-anchor-positioning 中启用实验（js如果没找到对应的开启选项，那么可能已经默认开启）。
进阶玩法
- 支持
fallback()自动选择备用定位； - 支持
anchor(top center)精细锚定； - 可结合
@position-try指令控制定位策略（与 Popover API 搭配）； - 更高自由度的浮层管理逻辑！
总结
CSS Anchor Positioning 是前端定位机制的一次飞跃，将原本依赖 JS 逻辑的工作交还给 CSS 实现，大大简化了弹出层、提示框等组件的开发。
未来，当它全面落地，你的前端弹层逻辑无需任何的js计算！！！
这篇关于CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
