原生 popover 不支持 placement，需用 css 锚点定位（chrome 125+/safari 17.4+）：触发元素设 anchor-name: --x，popover 设 position-anchor: --x 与 position: absolute，再用 anchor() 函数定位；注意 position-area 启用自动避让（仅 chromium 完整支持），:has() 实现差异化微调，避开 transform 父容器，并弃用 popover 属性以启用纯 css 方案。
用 position-anchor + anchor() 实现锚点定位
原生 popover 不支持 placement 参数，但 CSS 锚点定位（Chrome 125+、Safari 17.4+）能绕过 JS 计算，直接声明式对齐。核心是两步：给触发元素设 anchor-name，给 popover 设 position-anchor 并用 anchor() 函数读取其几何边界。
常见错误是漏掉 position: absolute 或写错 anchor 名——anchor-name 必须以 -- 开头，且值在全局唯一；position-anchor 的值必须完全匹配，大小写敏感。
示例：
button {
anchor-name: --trigger;
}
.popover {
position: absolute;
position-anchor: --trigger;
top: anchor(bottom);
left: anchor(center);
transform: translateX(-50%);
}
注意：anchor(center) 返回的是触发元素水平中心坐标，不是 50%，所以必须配 transform: translateX(-50%) 才能真正居中。
用 position-area 触发自动避让逻辑
position-area 是锚点定位的“智能开关”，它不指定绝对位置，而是告诉浏览器：“优先放这里，不行就换方向”。比如设 position-area: top，浏览器会尝试把 popover 放在触发元素上方；若空间不足（如贴顶），自动 fallback 到 bottom，无需 JS 监听 resize 或 scroll。
但它只在支持锚点定位的浏览器中生效，且当前仅 Chromium 系列（Chrome / Edge）完整实现 fallback 行为；Firefox 和 Safari 仍按静态规则处理，不会自动翻转。
关键限制：
-
position-area必须配合justify-self和align-self使用，否则无效果 - 不能和
top/left等传统偏移属性混用，否则会降级为普通绝对定位 - fallback 方向不可自定义，浏览器按 top → bottom → right → left 固定顺序尝试
用 :has() + 动态 class 做差异化微调
所有 popover 共享同一套 [popover] 样式时，无法单独调整某一个的位置。想实现“按钮 A 的 popover 往右偏 4px，按钮 B 的往下偏 8px”，就得靠 JS 动态加 class，再用 :has() 选中对应 popover。
例如：
button[data-popover-id="help"]::after {
content: "";
/* 触发元素伪类不影响 popover，但可用来标记 */
}
:has(button[data-popover-id="help"]) [popover] {
transform: translateX(4px);
}
这个写法依赖 Chromium 120+，且 :has() 在 [popover] 外层选择器中必须能向上追溯到明确的触发元素（如 button）。如果 popover 被插入到 底部，而触发按钮在深嵌套结构里，:has() 可能查不到关系链——此时只能退回到 JS 绑定 ID + querySelector。
避开 transform 父容器导致的锚点失效
如果触发元素的某个祖先节点有 transform（哪怕只是 transform: translateZ(0)），锚点定位会失效：浏览器无法正确读取其相对于视口的坐标，anchor() 返回 0 或 NaN。
这不是 bug，是规范行为——CSS 锚点定位要求锚点元素必须在“无变换上下文”的流中。解决方案只有两个：
- 移除祖先节点的
transform、perspective、filter等创建新层叠上下文的属性 - 把触发元素用
position: fixed提升出来（慎用，会影响滚动跟随）
别试图用 getBoundingClientRect() 补救：一旦锚点定位启动，JS 获取的坐标已与 CSS 引擎不同步，强行覆盖只会造成闪动或错位。
最易被忽略的一点：锚点定位和原生 popover 属性目前互不兼容。你不能一边写 <div popover>，一边指望 <code>position-anchor 生效——浏览器会优先走原生 popover 的 UA 定位逻辑，完全忽略 CSS 锚点规则。要纯 CSS 方案，就得放弃 popover 属性，改用 display: none / block 控制显隐，并手动管理焦点和键盘交互。
