CSS anchor positioning 的 fallback 位置配置

CSS anchor positioning 的 fallback 位置通过 position-try-fallbacks 配置：先定义锚点和默认位置，再列出翻转策略、区域位置或命名的 @position-try 候选。通常默认位置发生溢出时，浏览器尝试候选，采用能够满足空间条件的选项；找不到可用候选时，不会自动生成一个万能位置。

本文以“导出说明面板靠近窗口边缘后被挤出”的原创场景展开，重点排查锚点关联、候选规则、尺寸约束和回退路径。示例是布局片段，不包含完整菜单、焦点管理或弹窗开关，也没有在本文环境运行。

CSS Anchor Positioning 官方规范地址：https://drafts.csswg.org/css-anchor-position-1/

先区分锚点失联与空间不足

如果面板从一开始就没有贴近触发元素，应先看锚点关联，而不是不断追加候选。命名锚点使用 anchor-name，定位面板使用相应的 position-anchor；名称需要一致，锚点还必须是布局中有效的可用锚点。重复组件不要无意间复用同一个全局名称，以免面板关联到另一个实例。

如果默认位置能够正常显示，只在触发元素靠近边缘时溢出，再进入位置回退排查。还要区分“面板越出它的包含块边界”和“面板被其他元素遮盖”：fallback 处理空间问题，不负责解决所有层叠、裁剪或 DOM 挂载位置问题。规范对锚点和定位元素的关联关系有专门说明。CSS Anchor Positioning 规范

用默认位置和候选列表建立最小配置

先保留一份普通文档流中的说明内容，再在支持相关属性时启用固定定位与锚点。这样旧环境或主动关闭增强后，说明仍可阅读。下面两个元素应保持同一文档中的稳定顺序，锚点在前，面板在后。

查看导出说明

CSS 默认将内容放在下方，候选依次是上方与右侧。先把 position-try-order 保持为 normal，排查时更容易理解默认位置与显式列表的关系。

/* 普通流是基础回退，布局增强失效也不会丢失说明。 */
.export-note {
  box-sizing: border-box;
  inline-size: min(18rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid #bcc6d6;
  background: white;
  color: #182235;
}

/* 同时检测锚点、区域定位与具名候选声明的解析支持。 */
@supports (anchor-name: --export-trigger) and
          (position-area: bottom) and
          (position-try-fallbacks: --note-above) {
  .export-anchor {
    anchor-name: --export-trigger;
  }

  .export-note {
    position: fixed;
    position-anchor: --export-trigger;
    inset: auto;
    margin: 0.5rem;
    position-area: bottom;
    position-try-order: normal;
    position-try-fallbacks: --note-above, --note-side;
    max-block-size: min(20rem, calc(100dvh - 2rem));
    overflow: auto;
  }

  /* 命名候选只改变必要的布局描述，未改项沿用基础配置。 */
  @position-try --note-above {
    position-area: top;
  }

  @position-try --note-side {
    position-area: right;
    inline-size: min(15rem, calc(100vw - 2rem));
  }
}

这段代码假设面板采用常规水平书写布局，top、bottom、right 是物理方向。宽度、内边距和边距都参与实际空间需求；即使名义宽度小于视口，也不能忽略留白。position-try-fallbacks 的正式用途是给锚定元素提供替代位置，并在溢出相关包含区域时尝试这些位置。候选位置属性说明

自定义候选时一起调整位置与尺寸

@position-try 不是任意 CSS 声明的容器。它允许定位相关的描述符，例如位置区域、inset、margin、尺寸、自身对齐及锚点关联等。需要改变候选尺寸时，可以像示例右侧方案一样在规则内定义 inline-size，而不要以为换个方向就必然足够。

规则名是以双连字符开头的自定义标识，并要在候选列表中准确引用。如果列表写了不存在的名字，对应候选会被忽略。给关键布局项取明确名称，也比在排查中猜测浏览器到底执行了哪个组合更直接。自定义位置候选与可用描述符

若基础定位使用 top: anchor(bottom)、left 或 transform 之类的另一套表达，再额外叠加 position-area，可能产生并非预期的约束。示例选择一种表达，并以 inset: auto 清理旧偏移。接入已有样式时，应同样检查历史定位值，而不是只看新增的两行 fallback。

面板装不下的原因还可能是长 URL 不换行、内部表格有固定最小宽度，或某个子元素拥有较大的 min-width。候选只描述面板如何摆放，不会自动修正内部内容的尺寸策略。必要时让文本合理换行、内部区域可滚动，或在窄屏采用不同展示形态。

翻转组合和尝试顺序怎么选择

如果基本方案只是镜像到锚点另一边，可以改用内置翻转策略。flip-block 沿块轴翻转，flip-inline 沿行内轴翻转，二者的方向含义与书写模式相关。它们不是浏览器从当前屏幕物理方向随意猜出的 top 和 right。

/* 方案甲：两个独立候选，先考虑块轴翻转，再考虑行内轴翻转。 */
.export-note {
  position-try-fallbacks: flip-block, flip-inline;
}

/* 方案乙：只有一个候选，同时组合两种翻转；与方案甲不是同一列表。 */
.export-note.combined-flip {
  position-try-fallbacks: flip-block flip-inline;
}

上面是替代配置的语法对照，不要求与前面的具名候选同时粘贴。逗号分隔候选项，空格连接同一候选里的变换。组合时基于原始样式生成相应备选，不应将它理解为页面连续执行两次移动动画。

另外，position-try-order 不是给候选增加名称的属性。normal 保留通常的优先处理方式；most-height、most-width 和对应逻辑尺寸值可以影响初始展示时的空间优先选择。因此，如果面板一开始就没有采用默认方向，应检查是否设置了这类空间排序。候选空间排序说明

所有候选都放不下时怎样退回

fallback 列表不是“保证永远不溢出”的承诺。没有候选能满足要求时，通常会回到未应用候选的默认位置。对一个内容巨大或视口极小的面板，追加四个方向也不会凭空制造空间。

业务回退要单独设计。本文保留普通流布局作为撤销路径：出现兼容或布局问题时，关闭增强样式，说明回到原本位置；如果产品需要居中弹窗、底部抽屉或真正的 popover，就由组件负责那种展示形态与交互，而不要把它当作 position-try 的自动能力。

/* 应急回退类放在增强样式之后，由项目配置或组件状态控制。 */
.export-note.use-document-flow {
  position: static;
  position-anchor: auto;
  position-area: none;
  position-try-fallbacks: none;
  inset: auto;
  margin: 1rem 0;
  max-block-size: none;
  overflow: visible;
}

这个类使本例说明回到文档流，不删除内容，也不需要修改锚点文字。它是手动选择的降级状态，不是自动探测所有候选失败的脚本。@supports 只说明声明能否被解析，不能证明每个浏览器的全部边缘组合都与你的交互预期一致。

集成观察清单与常见问题

接入真实组件后，读者应覆盖锚点靠近上下左右边缘、窄窗口、长文本、页面缩放与滚动容器等情况。分别观察面板是否保持可读、内部滚动是否可用、实际关联对象是否正确。若组件允许键盘打开，还需确认焦点移动与关闭行为；这些属于组件功能，CSS 定位不会代办。

这是一份读者的集成观察清单，不代表本文已经执行了浏览器测试。上线记录可以保存触发条件、默认位置、候选列表、尺寸限制和采用的降级方式，便于下次复现同一配置。

为什么候选规则写了却没变化？ 先确认默认位置是否真的溢出，再看名字是否存在、属性是否被覆盖、锚点是否有效。默认位置可用时，没有必要为了“证明 fallback 生效”强迫它改变。

为什么逗号一改，位置差别很大？ 因为多个独立候选变成了一个组合候选。先决定产品想要的方向优先级，再选择对应写法。

能不能用 fallback 解决层叠遮挡？ 它不负责通用的遮挡检测或任意元素碰撞。需要同时检查包含块、裁剪祖先、层叠上下文和浮层挂载结构。

所有浏览器都可以直接启用吗？ 应以目标浏览器和 WebView 的具体支持为准。保留普通布局和可撤销开关，且不要混用旧示例中的历史属性名称；当前示例使用 position-try-fallbacks 与 @position-try。