CSS anchor positioning 实战：anchor-name、position-anchor 与 fallback 位置如何联动

做菜单、提示框或下拉层时，最烦的不是把浮层放到按钮旁边，而是按钮一靠近视口边缘，固定的 top、left 就开始溢出。CSS anchor positioning 把这段关系交给浏览器：先用 anchor-name 给按钮命名，再用 position-anchor 连接浮层，最后用 position-try-fallbacks 声明空间不足时的备选位置。

把“浮层相对谁定位”和“放不下时往哪里换”分开写，组件会比一串 JavaScript 坐标计算更容易复查；但上线前仍要用 @supports 和降级样式确认浏览器范围。

先把浮层关系拆成三个 CSS 动作

实验页里按钮带有 anchor-name: --demo-anchor，它是可被引用的锚点。提示框仍然是绝对定位元素，但通过 position-anchor: --demo-anchor 指向按钮，position-area: top 决定初始落点。这里的关键不是记住某个像素坐标，而是让布局关系跟着锚点走。

.anchor-button { anchor-name: --demo-anchor; }
.tip {
  position: absolute;
  position-anchor: --demo-anchor;
  position-area: top;
}

顶部空间不足时，让浏览器尝试备选位置

仅声明顶部位置还不够。示例用 @position-try --bottom 定义底部方案，再通过 position-try-fallbacks: --bottom 接入。浏览器会先尝试默认位置，检测到定位盒溢出时再尝试备选位置。这个顺序就是本文实验的真实控制流：anchor-name → position-anchor → top → --bottom。

@position-try --bottom {
  position-area: bottom;
  margin-top: 14px;
}
.tip { position-try-fallbacks: --bottom; }

用 @supports 保留可用的降级路径

Anchor positioning 仍属于逐步进入生产环境的能力。工程代码不要把整个浮层交互押在一个新属性上，可以先用普通的 position: absolute、固定的 transform 或 JavaScript 定位提供基础结果，再把锚点增强规则放在 @supports (anchor-name: --demo-anchor) 中。检测到不支持时，至少要保证提示内容可见、键盘能访问，不能只留下一个没有位置的空层。

常见问题

position-anchor 和 anchor() 有什么区别？

position-anchor 设置默认锚点，适合让同一组定位规则复用；anchor() 则可以在 top、left 等属性中直接读取某个锚点的边缘。

position-area 能替代所有 top 和 left 吗？

它适合表达锚点周围的区域关系，但复杂偏移仍可能需要 anchor()、margin 或自定义的 @position-try 方案。

为什么一定要做浏览器降级？

规范和实现仍在演进，Chrome 文档也建议用 @supports 做能力检测。基础定位先保证内容可用，增强规则只改善位置和溢出体验。

把实验结论带回组件代码

组件落地时先固定锚点命名和默认位置，再逐个加入 fallback，最后用视口边缘、滚动容器和键盘焦点做验收。只要每个备选位置都能在真实页面里被观察和复现，后续维护就不必追着散落的坐标计算找原因。