anchor() + position-anchor 能替代 getBoundingClientRect 手动计算，但需 Chrome 125+ 且不支持 transform 位移和 position: relative 祖先中断场景。
它能替代，但不是无条件替代——关键看是否需要跨浏览器支持、是否接受 Chrome 125+ 为最低运行环境。
anchor() + position-anchor 能直接取代 getBoundingClientRect 手动计算
传统 Popper 库（如 Floating UI）必须在每次 scroll、resize、zoom 甚至元素尺寸变化时，反复调用 getBoundingClientRect() 获取锚点位置，再手动算偏移、判断溢出、翻转方向。逻辑易错，且容易引发 layout thrashing。
-
anchor()是浏览器原生函数，声明式写法即可绑定坐标：top: anchor(bottom)、left: anchor(center) - 浏览器自动响应滚动、缩放、窗口 resize，无需监听事件或重触发计算
- 注意：由
transform引起的位移不会被anchor()捕获；祖先元素设了position: relative也会中断锚点跟随（这是常见失效点）
@position-try 提供声明式 fallback，比手写 if-else 更可靠
传统 JS 方案要自己写 if (bottomSpace ，边界判断稍有遗漏就会导致弹窗被裁剪或飞出视口。
-
@position-try允许定义多套策略，浏览器按顺序尝试首个不溢出的方案：@position-try { name: bottom; top: anchor(bottom); left: anchor(center); } - 无需 JS 判断视口尺寸、滚动偏移或
window.visualViewport，也不依赖ResizeObserver或IntersectionObserver - 但目前仅 Chrome 支持，Safari/Firefox 仍无实现计划（截至 2026 年 11 月）
Popover API + 锚点定位 = 声明式全链路控制
单独用 position-anchor 只解决“定位”，而 popover 属性解决“显示逻辑”——两者组合才能真正替代 Popper + 自定义模态层的整套方案。
立即学习“前端免费学习笔记（深入）”；
-
popover="auto"自动处理 ESC 关闭、点击外部关闭、焦点管理、::backdrop遮罩层 -
popovertarget和popovertargetaction实现按钮与弹窗的零 JS 绑定 - 必须用
@supports (position-anchor: --x)包裹锚点规则，否则老浏览器会忽略全部定位样式，弹窗退回到top: 0; left: 0（线上最常被漏掉的降级点）
真正难的不是写对新语法，而是把降级路径想全：当 @supports 不成立时，你得有一套能 work 的 position: absolute + getBoundingClientRect 备选逻辑，且不能和新逻辑冲突。这个边界往往在灰度发布时才暴露出来。
