CSS anchor positioning 实战：让浮层跟随目标元素并处理视口溢出

做筛选器、帮助气泡或右键菜单时，最容易失控的是“浮层跟着谁走”。如果把坐标写死在父容器里，目标元素一滚动或靠近窗口边缘，浮层就会错位。CSS anchor positioning 的思路是先给目标元素命名，再让绝对定位浮层引用这个锚点；空间不够时，再交给 position-try-fallbacks 换到另一侧。

先用 anchor-name、position-anchor 和 position-area 建立关系，再用 position-try-fallbacks 处理溢出；旧浏览器则保留普通 absolute 定位作为降级路径。

先把提示菜单的基线场景固定下来

示例只做一个任务：点击“更多”按钮后，在按钮下方显示帮助菜单。按钮是锚点，菜单是绝对定位元素。先准备一个带固定宽度的操作条，这样把浏览器窗口缩窄时，溢出问题能稳定复现。

  更多
  

    快捷键说明
    提交反馈
  

这里的基线是“菜单能出现，但还没有跟按钮绑定”。如果你直接给菜单写 top: 100%，它只认识自己的包含块，不知道按钮的位置。

让浮层跟着锚点移动

第一步给按钮声明 anchor-name，再让菜单使用同一个值作为 position-anchor。position-area 负责把菜单放在锚点的下方区域；按钮移动、滚动或改变所在布局时，菜单仍然以它为参照。

.more-button {
  anchor-name: --more-button;
}

.help-menu {
  position: absolute;
  position-anchor: --more-button;
  position-area: block-end span-inline-end;
  margin-block-start: 8px;
}

这三个名字对应同一条布局关系：anchor-name 注册目标，position-anchor 选择目标，position-area 给出相对区域。打开开发者工具观察菜单位置时，应该能看到它随着按钮的盒子移动，而不是固定在 .toolbar 的某个像素坐标。

用 position-try-fallbacks 处理视口溢出

按钮靠近窗口底部时，菜单放在下方可能超出可视区域。可以用 anchor() 直接指定 inset，也可以用 position-try-fallbacks 声明备用位置。为了让回退规则集中管理，示例定义一个 @position-try 块，把菜单翻到锚点上方。

.help-menu {
  position: absolute;
  position-anchor: --more-button;
  inset-block-start: anchor(--more-button bottom);
  inset-inline-start: anchor(--more-button left);
  position-try-fallbacks: --above-menu;
}

@position-try --above-menu {
  inset-block-start: auto;
  inset-block-end: anchor(--more-button top);
  margin-block-start: 0;
  margin-block-end: 8px;
}

首选位置放不下时，浏览器会尝试 position-try-fallbacks 中的 @position-try 选项。把窗口缩到菜单高度不足的宽度，或者让按钮滚到视口底部，成功状态应是菜单翻到按钮上方且没有被裁掉；不要只看 CSS 是否通过解析。

用窄视口和能力检测验收布局

验证时至少做两组对照：按钮位于操作条中间时，菜单应出现在下方；按钮接近视口底部时，菜单应切换到上方。滚动页面后再看一次，重点是菜单是否继续贴着按钮，而不是停留在旧坐标。

const supportsAnchor = CSS.supports('anchor-name: --more-button');
document.documentElement.classList.toggle('no-anchor-positioning', !supportsAnchor);

降级样式可以让菜单回到 .toolbar 的普通定位规则，例如使用 top: 100% 和 left: 0。这不是对新布局的模拟，而是保证不支持 anchor positioning 的浏览器仍然能打开菜单。

常见问题

position-anchor 和 anchor-name 为什么经常写错？

两者必须引用同一个自定义名称，例如按钮使用 --more-button，菜单的 position-anchor 也必须是 --more-button。名称不一致时，菜单就不会建立锚点关系。

position-area 和 anchor() 应该怎么选？

位置只需要表达“在锚点下方或上方”时，position-area 更直观；需要精确控制某条 inset 或和边距组合时，可以使用 anchor()。

为什么写了 position-try-fallbacks 仍然会溢出？

先检查备用选项是否真的存在、是否被正确引用，再检查浮层的尺寸和包含块。回退只会在候选位置可用时生效，不会替你限制菜单内容的最大高度。

旧浏览器需要删除整套样式吗？

不需要。保留普通 absolute 定位作为基础样式，再用能力检测或特性查询增强；这样新浏览器使用锚点布局，旧浏览器至少保留可用的菜单。

把浮层布局交给关系，而不是固定坐标

这个例子的关键不在于记住几个新属性，而在于把按钮与菜单的关系写进布局：anchor-name 说明参照物，position-anchor 选择参照物，position-area 或 anchor() 给出位置，position-try-fallbacks 负责空间不足时的备用路径。验收时用滚动和窄视口复查，再保留普通 absolute 降级，浮层才不会只在演示窗口里正常。