如何修复嵌套纯CSS Popover的锚点定位偏移问题？

阿华AIGC实验室

2026-4-2

嗨，我之前做类似的嵌套popover时也踩过这个坑！你猜的原因完全对——页面加载时第一个popover是默认隐藏状态，里面的按钮处于display: none，浏览器根本没法计算它的位置，自然就没法正确注册锚点。等你打开第一个popover再触发第二个时，浏览器还是用了初始的错误锚点信息，导致偏移。

给你两个纯CSS的修复方案，亲测有效：

方案一：锚点仅在父popover打开时生效

核心思路是只有当第一个popover打开后，才让内部按钮成为有效锚点，这样浏览器能实时获取它的正确位置。

调整后的CSS代码：

#first-popover {
  width: 300px;
}

/* 只有当第一个popover打开时，内部按钮才注册锚点 */
#first-popover:popover-open button {
  anchor-name: --my-anchor;
  width: fit-content;
}

#second-popover {
  position-anchor: --my-anchor;
  /* 明确指定相对于锚点的位置，比如按钮右侧居中，可根据需求调整 */
  inset-area: right center;
  /* 可选：加个间距避免贴太近 */
  margin-inline-start: 10px;
}

HTML部分可以给触发按钮加上明确的动作，避免歧义：

<button popovertarget="first-popover">Open first popover</button>
<div id="first-popover" popover>
  <!-- 明确指定动作是显示第二个popover -->
  <button popovertarget="second-popover" popovertargetaction="show">
    Open second popover
  </button>
</div>
<div id="second-popover" popover="manual">Hello world</div>

方案二：用父popover的显示状态强制更新子popover定位

如果方案一还偶尔有问题，可以试试结合:popover-open伪类，强制在父popover打开时刷新子popover的锚点计算：

#first-popover {
  width: 300px;
}

#first-popover button {
  anchor-name: --my-anchor;
  width: fit-content;
}

#second-popover {
  position-anchor: --my-anchor;
  inset-area: right center;
}

/* 当第一个popover打开时，强制子popover重计算定位 */
#first-popover:popover-open ~ #second-popover {
  position-anchor: --my-anchor;
}