CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

目录

• 📌 CSS Anchor Positioning：重新定义「锚定定位」的时代来了！
• 🎯 什么是 Anchor Positioning？
• 🧩 它解决了哪些痛点？
• 📺 实战演示：实现一个纯 CSS 的 Tooltip
• 📦 浏览器兼容性（截至 2025 年 6 月）
• 🔧 进阶玩法
• 🧠 总结

📌 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 --><p class="anchor">⚓︎</p><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%);      // 主要实现部分！      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', () => {      tip.style.display = 'none'    })

👆 利用 anchor() 函数直接“锁定”另一个元素的位置。position-anchor 可绑定任意锚点。

🔍 说明：

• anchor-name 定义锚点；
• position-anchor 绑定锚点;
• anchor() 使用已经定义好的锚点的位置；
• 全程无 JS 计算偏移！

📦 浏览器兼容性（截至 2025 年 6 月）

📌 可在 chrome://flags/#enable-anchor-positioning 中启用实验（如果没找到对应的开启选项，那么可能已经默认开启）。

🔧 进阶玩法

• 支持 fallback() 自动选择备用定位；
• 支持 anchor(top center) 精细锚定；
• 可结合 @position-try 指令控制定位策略（与 Popover API 搭配）；
• 更高自由度的浮层管理逻辑！

🧠 总结

CSS Anchor Positioning 是前端定位机制的一次飞跃，将原本依赖 JS 逻辑的工作交还给 CSS 实现，大大简化了弹出层、提示框等组件的开发。
未来，当它全面落地，你的前端弹层逻辑无需任何的js计算！！！