???? 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 结构
|
1 2 3 |
<!-- html --> <div class="anchor">??</div> <p class="positionedElement">This is a positioned element.</p> |
???? CSS 样式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* css */ :root { --anchor-width: 60px; --anchor-height: 90px; } .anchor { position: 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
|
1 2 3 4 5 6 7 8 9 |
// 可以看到我的js中没有任何的关于位置计算的代码！ 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() 函数直接“锁定”另一个元素的位置。position-anchor 可绑定任意锚点。
???? 说明：
- anchor-name 定义锚点；
- position-anchor 绑定锚点;
- anchor() 使用已经定义好的锚点的位置；
- 全程无 JS 计算偏移！
???? 浏览器兼容性（截至 2025 年 6 月）
| 浏览器 | 支持情况 |
|---|---|
| Chrome 125+ | ? 实验开启（部分已经默认开启） |
| Safari | ???? 尚未支持 |
| Firefox | ???? 尚未支持 |
| Edge | ? 同 Chrome |
???? 可在 chrome://flags/#enable-anchor-positioning 中启用实验（如果没找到对应的开启选项，那么可能已经默认开启）。
???? 进阶玩法
- 支持 fallback() 自动选择备用定位；
- 支持 anchor(top center) 精细锚定；
- 可结合 @position-try 指令控制定位策略（与 Popover API 搭配）；
- 更高自由度的浮层管理逻辑！
???? 总结
CSS Anchor Positioning 是前端定位机制的一次飞跃，将原本依赖 JS 逻辑的工作交还给 CSS 实现，大大简化了弹出层、提示框等组件的开发。
未来，当它全面落地，你的前端弹层逻辑无需任何的js计算！！！
