CSS Anchor Positioning：锚点定位与弹层对齐实践

概述

Anchor Positioning 允许元素相对另一个被命名的锚点进行定位。锚点元素声明 anchor-name，定位元素声明 position-anchor 并使用 anchor() 函数读取锚点几何。

用法/示例

.button { anchor-name: --btn }
.tooltip {
  position: absolute;
  position-anchor: --btn;
  left: anchor(left);
  top: anchor(bottom);
}

工程建议

• 为可能溢出的弹层提供备选位置与边界约束。
• 与 Popover 或 View Transitions 协作，统一交互与动效体验。
• 对不支持环境回退至 JS 计算或简单绝对定位。

参考与验证

• web.dev：Anchor positioning — https://web.dev/articles/anchor-positioning
• CSSWG 草案：Anchor Positioning — https://drafts.csswg.org/css-anchor-position-1/