CSS Anchor Positioning 怎么让浮层跟随触发元素

做 tooltip、下拉菜单或帮助气泡时，最麻烦的通常不是把浮层放到按钮旁边，而是按钮移动、滚动或贴近视口边缘后，浮层仍要跟着走且不能被截断。CSS Anchor Positioning 的思路是把触发元素声明为锚点，再让浮层引用这个锚点；浏览器负责维持相对位置，必要时再选择回退位置。

先建立锚点与浮层的静态关系

先把职责拆成两块：按钮只负责暴露一个稳定的锚点名，浮层负责声明自己贴在哪一侧。锚点名使用自定义标识，例如 --menu-anchor；它不是 JavaScript 变量，也不是元素的 id，而是 CSS 用来关联两个盒子的名称。

下面的最小结构把菜单放在按钮下方。代码中的中文注释只解释关键边界，实际项目可以把浮层换成 tooltip、日期选择器或操作菜单。

更多操作
编辑　复制　归档

.menu-trigger {
  anchor-name: --menu-anchor; /* 给触发元素分配 CSS 锚点名 */
}

.action-menu {
  position: fixed; /* 让浮层脱离普通文档流，但仍可引用锚点 */
  position-anchor: --menu-anchor; /* 关联上面的触发元素 */
  position-area: block-end span-inline-end; /* 默认放到按钮下方并对齐边缘 */
  margin-block-start: 8px; /* 给浮层与按钮留出呼吸空间 */
  max-inline-size: min(20rem, 90vw); /* 防止窄屏上横向溢出 */
}

这里不需要在每次窗口变化时读取 getBoundingClientRect() 再改内联样式。若需要对齐某个边缘或复用锚点尺寸，可以改用 anchor(--menu-anchor inline-end) 和 anchor-size(--menu-anchor inline)；这类写法更精确，但也更依赖浏览器对相关函数的支持。

用回退策略处理视口边缘

默认位置只解决了“跟随”，没有解决“放不下”。例如按钮已经靠近窗口底部，菜单继续放在下方就会被视口裁掉。此时给浮层配置回退列表，浏览器会在候选位置中选择能避免溢出的方案。

.action-menu {
  position-try: flip-block, flip-inline; /* 先翻转块方向，再尝试内联方向 */
  position-visibility: anchors-visible; /* 锚点不可见时隐藏脱离目标的浮层 */
}

flip-block 通常用于在上下方向翻面，flip-inline 用于左右方向翻面。也可以使用 position-try-fallbacks 写更明确的候选组合；如果某个项目要优先保证菜单宽度，就把选择顺序和尺寸策略一起记录在组件样式中，别只靠“看起来能放下”。

把可用性和降级边界一起设计

Anchor Positioning 是 CSS 能力，不应默认所有访问者都支持。可以用 @supports (anchor-name: --test) 判断锚点能力；不支持时，让浮层回到普通的相对定位或由现有弹层组件接管。降级版本至少要保证按钮能打开内容、内容不被键盘焦点跳过，并且不会把操作入口藏在屏幕外。

还要把语义关系保留在 HTML 中：按钮使用 aria-controls 和 aria-expanded，菜单项有正确的 role，打开、关闭和 Escape 键处理仍由 JavaScript 完成。CSS 只负责几何关系，不能替代交互状态管理。

相关问题

CSS Anchor Positioning 能完全替代 Popper 类库吗？

不能直接下结论。它能减少测量和定位代码，但焦点管理、点击外部关闭、复杂滚动容器和旧浏览器兼容仍需要组件逻辑或降级方案。

为什么浮层已经关联锚点却没有出现在预期位置？

先查锚点名是否完全一致，再查浮层是否真的设置了 position，最后检查祖先的裁剪、层叠上下文和浏览器支持情况。

什么时候应该使用 anchor() 而不是 position-area？

只表达上下左右关系时优先用 position-area；需要把某条边、偏移量或尺寸精确对齐到锚点时，再考虑 anchor() 和 anchor-size()。