CSS anchor positioning 使用 position-try-fallbacks 处理浮层溢出

CSS anchor positioning 解决了浮层跟随按钮、菜单或输入控件的问题，但初始位置正确不等于始终可用：锚点滚到视口顶部时，顶部 tooltip 可能被截断；菜单靠近右边缘时，子菜单也可能跑出屏幕。处理这类情况，核心是给浮层设置一个默认位置，再用 position-try-fallbacks 按顺序声明备选位置。浏览器会在初始位置发生溢出时尝试这些方案，找到能留在包含块或视口内的第一个方案。

先把默认位置和溢出边界分开

下面以一个按钮和提示浮层为例。锚点元素声明 anchor-name，浮层通过 position-anchor 连接它。默认状态放在按钮上方，只有上方空间不足时才让浏览器尝试其他位置。

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

.help-tooltip {
  position: fixed;
  position-anchor: --help-button;
  position-area: top;
  margin-bottom: 8px;
  /* 先给用户最稳定的默认位置，再配置边缘兜底 */
  position-try-fallbacks: flip-block, flip-inline;
}

flip-block 会沿块轴翻到另一侧，适合“上方不够就放下方”的 tooltip；flip-inline 则处理左右边缘。列表是有顺序的，先写的方案先尝试。不要把“可能有空间”的所有方向无差别堆进去，否则浮层方向会变得难以预测。

用 position-area 细化候选方向

只做翻面仍不够时，可以直接把 position-area 值放进候选列表。例如菜单默认在锚点右侧，右侧空间不足时依次尝试下方、左侧和上方：

.submenu {
  position: fixed;
  position-anchor: --menu-trigger;
  position-area: right span-bottom;
  /* 让候选方向表达产品的优先级 */
  position-try-fallbacks: bottom, left, top;
}

这种写法比单纯 flip 更容易和产品交互规则对齐。position-area 是围绕锚点的区域选择，候选项仍然按照逗号分隔；它不应和同一候选项里的其他 try tactic 混成一个空格组合。若没有任何候选能完全避免溢出，浏览器会回到初始的 position-area，所以默认位置必须本身可接受。

需要改尺寸和间距时定义 @position-try

有些浮层换到左侧后需要缩窄，换到下方后又需要增加顶部间距。这时用命名的 @position-try，把位置和相关尺寸绑定成一个候选方案：

@position-try --submenu-bottom {
  position-area: bottom;
  margin-top: 10px;
  /* 下方方案允许更宽，但保留与锚点的间距 */
  max-inline-size: 28rem;
}

@position-try --submenu-left {
  position-area: left;
  margin-right: 10px;
  /* 左侧空间通常更窄，候选方案主动收窄 */
  max-inline-size: 18rem;
}

.submenu {
  position-try-fallbacks: --submenu-bottom, --submenu-left;
}

自定义候选里的值会覆盖浮层原本对应的定位、margin 或尺寸声明；当滚动导致另一个候选生效时，前一个候选的值不会继续残留。候选名称要和 anchor 名称、CSS 自定义属性区分开，方便后续维护。

用降级和检查清单收住边界

锚点定位属于较新的 CSS 能力，不能假设所有目标浏览器都能执行同一套规则。可以把增强样式放在 @supports 中，默认使用一个不会完全离开视口的普通定位方案；不支持增强能力时，至少保证 tooltip 仍能打开、阅读和关闭。

.help-tooltip {
  position: absolute;
  inset: auto 0 100% auto;
  /* 降级方案先保证可见，不依赖 anchor() */
}

@supports (position-anchor: --help-button) {
  .help-tooltip {
    position: fixed;
    position-anchor: --help-button;
    position-area: top;
    position-try-fallbacks: flip-block, flip-inline;
  }
}

上线前至少检查五件事：锚点离四条视口边缘很近时是否仍可读；候选顺序是否符合交互预期；浮层内容变长时是否有最大尺寸；候选全失败时默认位置是否能接受；按钮与浮层是否有正确的焦点、键盘和语义关联。若锚点离开滚动容器后内容本身已无意义，再评估 position-visibility 的隐藏策略，而不是无限增加 fallback。

常见问题

position-try-fallbacks 没有生效怎么办？

先确认浮层确实声明了 position-anchor，锚点名称完全一致，并且初始位置真的产生了可计算的溢出。再检查候选值是内置 tactic、合法的 position-area，或已定义的 @position-try 名称。

为什么浮层仍然回到了默认位置？

这通常意味着候选都无法让浮层完全留在可用区域，浏览器按规范回退到初始位置。缩短内容、设置合理的最大尺寸，或增加一个更宽松的候选，比继续重复同一个方向更有效。

参考：MDN position-try-fallbacks、MDN Fallback options、Chrome Anchor Positioning API。