CSS position-visibility怎样让锚定浮层随锚点离屏隐藏

锚定浮层最容易出现的一种错位，是按钮已经滚出视口，提示框却还停留在页面上。这个问题不一定要用 JavaScript 监听滚动解决：在 CSS Anchor Positioning 场景中，可以给浮层设置 position-visibility: anchors-visible，让锚点完全不可见时把浮层强制隐藏。

官方地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-visibility

先看锚点离屏后为什么会留下浮层

假设页面有一个目录按钮和一个跟随按钮定位的说明浮层。按钮在可滚动容器里，浮层使用锚点定位，二者的几何关系由浏览器自动计算。当按钮滚出可视区域时，浮层并不会因为“用户看不到按钮”就自动消失；只要它仍满足定位和布局条件，它仍可能占据空间或遮住其它内容。

章节目录

  
  当前章节的阅读位置

.toc-button {
  /* 给按钮命名，让锚定浮层可以引用它。 */
  anchor-name: --toc-anchor;
}

.toc-popover {
  /* 先把元素放入锚点定位上下文。 */
  position: absolute;
  position-anchor: --toc-anchor;
  position-area: block-end span-inline-end;
  /* 没有额外可见性规则时，浮层可能继续留在布局中。 */
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  background: white;
}

真正的问题不是定位坐标算错，而是浮层已经失去了用户理解它所需的参照物。此时要解决的是可见性，而不是继续调整 top、left 或偏移量。

用 anchors-visible 让浮层跟随锚点可见性

把 position-visibility: anchors-visible 加到锚定浮层上，表示当关联锚点完全隐藏时，浮层也应被强制隐藏。这里的“隐藏”不是把浮层移动到某个固定坐标，而是让它及其后代表现得像设置了 visibility: hidden。

.toc-popover {
  /* 锚点完全离屏时隐藏浮层，避免浮层失去语义参照。 */
  position-visibility: anchors-visible;
  position: absolute;
  position-anchor: --toc-anchor;
  position-area: block-end span-inline-end;
  max-inline-size: min(280px, 80vw);
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
}

这个值适合“浮层只有在锚点仍可被用户看到时才有意义”的组件，例如目录提示、表格行操作说明和跟随按钮的快捷菜单。它不负责创建锚点，也不负责决定浮层放在上方还是下方，因此 anchor-name、position-anchor 与位置回退仍要单独配置。

三个值怎么选：always、anchors-visible 和 no-overflow

position-visibility 的选择，关键在于你要观察的是锚点、浮层，还是两者都不想隐藏。

.always-popover {
  /* 锚点离屏后仍需要继续展示独立提示时使用。 */
  position-visibility: always;
}

.anchor-bound-popover {
  /* 浮层与锚点强绑定，锚点完全离屏就隐藏。 */
  position-visibility: anchors-visible;
}

.viewport-safe-popover {
  /* 浮层一旦溢出包含块或视口，就使用强制隐藏作为保底。 */
  position-visibility: no-overflow;
}

先尝试换位置，再把隐藏作为最后一步

如果浮层只是因为当前位置放不下，不要马上用 no-overflow 把它隐藏。CSS Anchor Positioning 可以先通过 position-try-fallbacks 或 @position-try 尝试其它位置，例如从锚点下方切到上方。只有没有可用位置时，隐藏才是合理的体验。

.help-popover {
  /* 默认尝试放在锚点下方。 */
  position-area: block-end;
  position-try-fallbacks: --above;
  /* 位置都不可用时，避免浮层继续遮挡或溢出。 */
  position-visibility: no-overflow;
}

@position-try --above {
  /* 先换到锚点上方，再决定是否需要隐藏。 */
  position-area: block-start;
}

可以把两者分成两个阶段理解：position-try-fallbacks 解决“浮层应该换到哪里”，position-visibility 解决“所有可接受位置都失败后是否还要显示”。把职责混在一起，通常会得到一个偶尔消失、却没有替代位置的浮层。

用 @supports 给不支持浏览器保留基础内容

position-visibility 属于较新的 CSS Anchor Positioning 能力，不能假设所有目标浏览器都支持。降级时先保证浮层有基本样式和可读内容，再在特性查询中启用离屏策略。

.toc-popover {
  /* 基础样式先成立，旧浏览器至少能看到可读浮层。 */
  position: absolute;
  z-index: 10;
  max-inline-size: 280px;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
}

@supports (position-visibility: anchors-visible) {
  .toc-popover {
    /* 支持新属性时再加入与锚点可见性绑定的行为。 */
    position-visibility: anchors-visible;
  }
}

@supports not (position-visibility: anchors-visible) {
  .toc-popover {
    /* 不支持时保持静态可见，不制造不可读的空白状态。 */
    outline: 1px dashed #94a3b8;
  }
}

如果旧浏览器连锚点定位也不支持，还要为浮层提供普通定位或交互式替代方案。这里的目标是渐进增强：新浏览器获得自动离屏隐藏，旧浏览器仍能完成查看信息的基本任务。

迁移时按这四项排查

1. 先查锚点是否有效。确认按钮设置了 anchor-name，浮层使用了相同的 position-anchor，不要把自定义标识写成两个不同名字。
2. 再查真正的离屏对象。如果是锚点离屏，优先看 anchors-visible；如果是浮层被裁切，才看 no-overflow。
3. 再查位置回退。浮层只是放错位置时，先补 position-try-fallbacks，不要直接用隐藏掩盖布局问题。
4. 最后查降级。用 @supports 把新行为包起来，保证不支持浏览器仍有静态内容和可访问名称。

常见问题

anchors-visible 会监听滚动事件吗？

不需要手写 JavaScript 滚动监听。它表达的是锚定元素与包含块或视口的可见性条件，由浏览器根据布局状态处理。

为什么用了 anchors-visible，浮层还是没有出现？

先确认锚点定位关系成立，再确认锚点实际存在且没有被其它规则隐藏。这个值只控制“锚点完全不可见时是否隐藏”，不会自动创建 anchor-name 或修正定位位置。

no-overflow 和 anchors-visible 能一起写吗？

可以组合多个条件表达更严格的隐藏策略，但应先明确产品意图：是锚点离屏就隐藏，还是浮层溢出就隐藏。条件越严格，浮层越可能在边界状态消失。

能不能只用 position-try-fallbacks，不写 position-visibility？

可以。若总能找到一个可用位置，位置回退已经足够；当浮层失去锚点参照或所有位置都会溢出时，再用 position-visibility 作为最终保底。