CSS position-try-fallbacks 怎么自定义浮层回退顺序

做一个跟随按钮的提示卡片时，最容易踩到的坑不是把浮层放到按钮旁边，而是按钮一靠近视口边缘，浮层就被截断。position-try-fallbacks 的作用是给 CSS 锚点定位提供一组有顺序的备选位置：浏览器先尝试默认位置，发生溢出后再按列表顺序寻找能放下浮层的候选。

先把默认位置和回退候选分开

先定义 anchor，再给浮层设置 position-anchor 和初始的 position-area。这里的 top 是默认位置，不是第一个 fallback。只有默认位置会溢出时，浏览器才会进入 position-try-fallbacks 的候选列表。

.trigger {
  /* 中文注释：给可跟随的锚点起一个局部名称 */
  anchor-name: --menu-trigger;
}

.menu {
  /* 中文注释：浮层与锚点建立关联，并先放在锚点上方 */
  position: fixed;
  position-anchor: --menu-trigger;
  position-area: top;

  /* 中文注释：默认位置放不下时，按列表顺序尝试备选位置 */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

这段配置的判断顺序是：先尝试 top，再尝试沿块轴翻转，再尝试沿行轴翻转，最后同时翻转两个轴。不要把候选理解成“同时执行的动画”；每个逗号项都是一次独立的布局尝试，浏览器会采用第一个能避免溢出的项。

用逗号排优先级，用空格组合双轴翻转

自定义回退顺序时，最关键的语法区别只有一个：逗号代表下一个候选，空格代表当前候选中的组合策略。若写成 flip-block, flip-inline，浏览器会先尝试一个轴，再尝试另一个轴；若写成 flip-block flip-inline，两个翻转属于同一个候选，会一起应用。

.menu {
  /* 中文注释：前两个候选保留单轴优先，第三个候选负责角落场景 */
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

.menu-wide {
  /* 中文注释：需要精确控制方向时，直接枚举 position-area 候选 */
  position-try-fallbacks: top, top right, right, bottom right, bottom, left;
}

如果菜单经常出现在左上角或右下角，最后的组合项很重要：只提供两个单轴候选，可能会在两个方向都不足时回到原位置，反而再次溢出。空间更复杂时，可以把 top right、bottom left 这类 position-area 值写成更细的候选序列。

需要复用时定义自定义 try 选项

多个组件共享同一套策略时，可以用 @position-try 把“向下并保持边距”的修改集中命名，再在回退列表中引用它。自定义项不存在时，对应的 dashed-ident 会被忽略，所以命名要和声明保持一致。

@position-try --below-with-gap {
  /* 中文注释：把浮层改到锚点下方，并保留可读间距 */
  position-area: bottom;
  margin-top: 8px;
}

.help-popover {
  /* 中文注释：自定义方案优先，最后再用内置双轴翻转兜底 */
  position-try-fallbacks: --below-with-gap, flip-block flip-inline;
}

维护时建议把“哪个位置优先”写成产品规则：例如菜单优先保持阅读方向，提示卡片优先避免遮挡按钮，最后才接受双轴翻转。这样列表顺序不是随手堆出来的，后续调整也容易复查。

用四个边角复查兼容边界

复查不要只看屏幕中央。把 anchor 分别放到上、下、左、右边缘，再检查四个角：单轴空间不足时是否命中预期候选，角落是否命中组合项，候选全失败时是否能接受回到默认位置。MDN 当前将该能力标为较新的浏览器平台特性，旧浏览器可能不识别；可以保留普通定位作为基础样式，并把锚点定位规则作为增强层。

常见问题

为什么写了两个 fallback，浮层还是跑回原位置？

通常是两个候选都无法完整避免溢出。补上组合候选，或改用更细的 position-area 序列，再检查浮层自身尺寸和边距。

逗号和空格能互换吗？

不能。逗号产生新的尝试项，空格把策略合并进同一次尝试；误用会改变候选数量和优先级。

可以直接只写 position-try 吗？

可以使用 position-try 简写同时表达回退选项和顺序，但团队需要长期维护时，拆开写长属性通常更容易读出每个职责。

旧浏览器不支持时怎么办？

先提供普通的绝对或固定定位样式，再把锚点定位和回退规则作为增强；不要把关键操作入口只交给新属性。