Chrome 125+/Edge 125+ 仅支持 CSS Anchor Positioning，需手动开启实验标志；Safari/Firefox 完全不解析 anchor() 函数，静默忽略整条声明，无 fallback 机制，必须用 JS 运行时检测与定位兜底。
Chrome 125+ 才支持，Safari/Firefox 完全不认
CSS Anchor Positioning 不是“写了就能用”的特性。截至 2026 年 8 月，它仅在 Chrome 125+ 和 Edge 125+ 中可用，且必须手动开启 chrome://flags/#anchor-positioning 实验标志；Safari 和 Firefox 当前版本（包括 Safari 17.6、Firefox 128）完全不解析 anchor() 函数——连语法错误都不会报，直接静默忽略整条声明。
这意味着：如果你只写 top: anchor(--trigger top);，Safari 用户看到的是 top: auto（即默认定位），元素大概率会错位或消失。别指望浏览器自动 fallback，它根本没看见那行代码。
- 检测方式不是靠
@supports (anchor-name: --x)—— 这个语法无效，@supports不识别anchor-name属性 - 真正能测的只有 JS：
CSS.supports('position: absolute; top: anchor(--x top)')，但 IE11 和旧 WebView 里CSS.supports本身就不存，需先判空 - 最稳妥的运行时检测是：创建一个带
anchor-name的临时元素，再用getComputedStyle读取其anchorName（注意大小写），但需确保 DOM 已挂载
anchor-name 写错就彻底失效
anchor-name 不是 ID，也不是 class，它是严格受限的 CSS 自定义标识符：必须以 -- 开头、不能含数字开头、不能有大写字母混用（--TooltipAnchor ≠ --tooltipanchor）、不能重复、不能设在 display: none 或 visibility: hidden 元素上。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 写成
id="trigger"然后在 CSS 里用anchor(#trigger top)—— 浏览器直接跳过，不报错 - 把
anchor-name: --tip;写在.trigger { display: none; }上 —— 锚点被注销，anchor()返回0px - 多个元素都设
anchor-name: --menu;—— 只有第一个生效，其余锚点不可用 - 用在
position: static元素上 —— 大部分浏览器忽略该声明，锚点形同虚设
target 元素必须是 absolute/fixed，且 anchor() 只能用于特定属性
anchor() 不是通用函数，它只被 top、right、bottom、left、inset-block-start、inset-inline-end、translate（注意：仅限数值部分，不是整个 transform）等可计算长度的属性识别。
以下全是无效写法，不会报错但也不起作用：
-
margin-top: anchor(--trigger top);（margin不接受anchor()） -
width: anchor-size(--trigger width);写在max-width里（anchor-size()只支持width、height、min-width等明确尺寸属性） -
top: anchor(--trigger top) + 8px;（不支持运算，必须拆成top: anchor(--trigger top); margin-top: 8px;） -
position: relative; top: anchor(--trigger top);（position: relative下anchor()被静默丢弃）
正确姿势：目标元素必须设 position: absolute 或 position: fixed，且只在允许的属性中调用 anchor()。
JS fallback 是唯一靠谱的兜底方案
别依赖 @supports 做降级 —— 它无法检测 anchor() 支持性，且 IE 完全不解析该规则。真正可行的是 JS 运行时接管：
- 用
IntersectionObserver监听锚点元素是否可见，避免滚动时位置漂移 - 用
getBoundingClientRect()手动计算位置，兼容所有浏览器（包括 IE11） - 关键逻辑封装成函数，例如：
positionTooltip(anchorEl, tooltipEl, { side: 'bottom', offset: 8 }) - 通过 class 切换控制样式：默认用 JS 定位，支持 Anchor 的环境再用 CSS 覆盖（
.supports-anchor .tooltip { position: absolute; top: anchor(--x top); }）
复杂点不在 JS 逻辑本身，而在「何时触发重定位」：锚点元素动态显示/隐藏、父容器 transform、视口缩放变化时，CSS 原生能自动响应，JS 必须手动监听并 re-calculate —— 这是降级成本最高的地方。
