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

2025-06-17 15:00:35 onebyte8bits

📌 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 {
      --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 125+	✅ 实验开启（部分已经默认开启）
Safari	🚫 尚未支持
Firefox	🚫 尚未支持
Edge	✅ 同 Chrome

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

🔧 进阶玩法

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

🧠 总结

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