CSS Anchor Positioning 如何配置 position-try 回退位置

CSS Anchor Positioning 的回退位置，核心不是再写一套 JavaScript 计算，而是给锚定浮层声明候选位置。最小方案是先用 anchor-name 和 position-anchor 建立关联，再用 position-area 指定初始位置，最后通过 position-try 列出 flip-block、flip-inline 或自定义选项。浏览器发现当前位置会溢出时，会按候选规则寻找仍能完整显示的位置。

这套能力适合 tooltip、气泡菜单、说明卡片等“跟随某个元素，但不能被视口裁掉”的场景。要注意，position-try 是简写属性，包含 position-try-order 与 position-try-fallbacks；目标浏览器的 CSS Anchor Positioning 支持情况仍应单独检查。

先把锚点与浮层关系写清楚

锚点元素负责暴露名称，浮层负责引用这个名称。下面的示例把提示框放到按钮上方，position: fixed 让它以视口为定位边界，便于处理滚动和边缘空间。

/* 锚点对外提供一个可引用的名称 */
.help-button {
  anchor-name: --help-anchor;
}

/* 浮层引用锚点，并声明默认在锚点上方 */
.help-popover {
  position: fixed;
  position-anchor: --help-anchor;
  position-area: top;
  margin-bottom: 8px; /* 给文字与按钮留出可读间距 */
  max-inline-size: 24rem; /* 避免提示框横向过宽 */
}

这里的 position-area: top 只是默认位置，不代表浮层永远只能在上方。回退声明会在默认位置不足时接管布局。

用 position-try 配置上下左右回退

最容易维护的写法是优先使用内置翻转策略。flip-block 沿块轴翻转，常见效果是“上方不足就去下方”；flip-inline 沿内联轴翻转，常见效果是“左侧不足就去右侧”。逗号分隔的是不同候选，空格分隔的是同一个候选中的组合。

/* 先尝试翻到块轴另一侧，再尝试内联轴另一侧 */
.help-popover {
  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

/* 也可以写成长属性，便于只修改候选列表 */
.help-popover {
  position-try-fallbacks: flip-block, flip-inline;
}

当上方放不下时，第一项可能把浮层翻到下方；如果仍然不合适，浏览器继续尝试下一项。最后的组合项同时变换两个轴，适合锚点靠近角落的情况。若所有候选都无法让浮层完整回到可用区域，布局会回到默认位置，因此仍要给浮层设置合理宽度和间距。

需要精确布局时定义 @position-try

内置翻转只改变方向。如果某个候选还需要修改间距、内联尺寸或对齐方式，可以用 @position-try 定义命名选项，再放进 position-try-fallbacks。自定义规则里的声明应服务于同一个浮层，不要把无关的颜色、动画等样式塞进去。

/* 自定义一个靠左显示、带间距并限制宽度的候选 */
@position-try --menu-left {
  position-area: left;
  margin-inline-end: 10px; /* 避免浮层贴住锚点 */
  max-inline-size: 20rem; /* 控制长文提示的阅读宽度 */
}

.help-popover {
  position-try-fallbacks:
    --menu-left,
    flip-block,
    flip-inline;
}

自定义名称必须是带两个连字符的标识符，并且只有被引用到时才会参与候选。候选列表里的顺序表达回退偏好；如果更关心首次出现时哪一侧空间更大，可以再设置 position-try-order: most-height 或 most-width。这和滚动到边缘后的回退判断是两个关注点，不要混为一谈。

兼容性、隐藏与降级边界

生产使用时，把 CSS Anchor Positioning 当成渐进增强：先保留普通的绝对定位或固定定位，让内容在不认识这些属性的浏览器里仍可读；支持新能力的浏览器再应用锚点和回退规则。测试时重点观察三个边界：锚点靠近四个角、浮层内容变长、滚动容器而不是整个视口发生裁剪。

如果锚点离开屏幕后，浮层继续显示已经没有意义，可以考虑 position-visibility 来声明条件隐藏；如果内容必须始终可见，则优先调整候选位置，而不是直接隐藏。不要只测按钮位于页面中央的情况，也不要把“所有候选都失败后回到默认位置”误认为浏览器自动完成了无限次重新布局。

常见问题

position-try 和 position-try-fallbacks 怎么选？ 只需要候选列表时用长属性更直观；需要同时设置首次选择倾向时用 position-try 简写。

多个回退之间用逗号还是空格？ 逗号表示多个候选，空格表示同一个候选内的组合，例如 flip-block flip-inline 是一次同时翻转两个轴。

为什么写了 @position-try 仍然不生效？ 先确认浮层确实是锚定定位元素，名称在 anchor-name 与 position-anchor 之间完全一致，再检查目标浏览器是否支持该规则。

参考资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-try；https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40position-try；https://www.w3.org/TR/css-anchor-position-1/