anchor() 函数以声明式替代 getBoundingClientRect 手动计算，浏览器自动响应滚动、缩放等变化；position-anchor 解耦 DOM 结构依赖，支持跨层级锚定；@position-try 提供多策略自动 fallback。
anchor() 函数直接替代 getBoundingClientRect 手动计算
传统 Popover 依赖 JavaScript 实时调用 getBoundingClientRect() 获取触发元素位置，再结合滚动、缩放、窗口尺寸反复计算，逻辑易错且性能敏感。而 anchor() 是浏览器原生函数，声明式写法即可绑定锚点坐标：top: anchor(top)、right: anchor(right)，浏览器自动响应滚动、resize、zoom 变化，无需监听或重算。
position-anchor 属性解耦 DOM 结构依赖
绝对定位弹窗必须依赖父级 position: relative 创建包含块，一旦 DOM 嵌套过深或祖先有 overflow: hidden，就会被裁剪或错位。而 position-anchor: --anchor-el 允许弹窗和触发按钮完全无关——按钮可位于 .header，弹窗可挂载在 底层，仍能精准对齐。结构自由，规避了 90% 的“飞走”问题。
锚点定位天然支持 fallback 与多位置尝试
传统 JS 方案需手动判断视口空间、翻转方向（如 bottom → top）、处理碰撞，代码冗长。CSS 锚点定位通过 @position-try 规则可定义多套定位策略：@position-try { name: bottom; top: anchor(bottom); left: anchor(center); }，浏览器自动选择首个不溢出的方案。这比手写 if (bottomSpace 更鲁棒、更轻量。
兼容性现状与 fallback 必须显式写死
Chrome 125+ 已稳定支持，但 Safari 和 Firefox 尚未跟进。不能只写 position-anchor 就上线。必须搭配降级逻辑：.popup { position: absolute; top: 0; left: 0; } @supports (position-anchor: --x) { .popup { position-anchor: --x; top: anchor(bottom); left: anchor(center); } }。漏掉 @supports 包裹，老浏览器会直接忽略全部定位规则，弹窗回到左上角——这是最容易被忽略的线上事故点。
立即学习“前端免费学习笔记（深入）”；
