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

## 概述 Anchor Positioning 允许元素相对另一个被命名的锚点进行定位。锚点元素声明 `anchor-name`，定位元素声明 `position-anchor` 并使用 `anchor()` 函数读取锚点几何。 ## 用法/示例 ```css .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/