anchor positioning 是实验性功能，必须搭配 js fallback 使用，否则生产环境将失效；其语法、兼容性和降级逻辑均有严格限制，需运行时双重检测与样式隔离。
没有 JS fallback 就别上 Anchor Positioning —— 它不是渐进增强，而是实验性功能，不兜底就等于在生产环境裸奔。
anchor-name 和 anchor() 必须成对存在，且浏览器不报错也不警告
Chrome 125+ 中，anchor-name: --tooltip 写错格式（比如漏了 --、用了 id 或 class 名）、或目标元素没设 position: absolute，CSS 解析器会静默忽略整条规则。用户看不到任何提示，浮层就卡在默认位置，你得靠肉眼排查。
-
anchor-name必须写在非display: none的元素上；visibility: hidden可以，但锚点失效后不会触发降级逻辑 -
anchor()只能用在top/left/translate/inset-block-start等白名单属性里，写进margin或width里完全没反应 - 大小写敏感、不可重复、不能跨 shadow DOM —— 这些限制全靠人肉校验，DevTools 不高亮错误
检测浏览器是否真正支持 anchor positioning
不能只查 CSS.supports('anchor-name', 'none')，它返回 true 但实际不生效是常态。必须组合检测：
- 查
CSS.supports('position', 'anchor')（已废弃，但旧资料还在误导） - 查
CSS.supports('top', 'anchor(--x top)')—— 这才是真支持的信号 - 运行时用
getComputedStyle(el).top检查是否解析出有效值，而非anchor(--x top)字符串原样返回 - 对 Safari / Firefox / 微信内置浏览器，直接跳过所有 anchor 相关样式，走 JS fallback 分支
JS fallback 要接管全部定位逻辑，不能只补 gap
很多人以为「anchor 定位失败就 fallback 到 position: absolute + getBoundingClientRect()」就够了，其实远远不够。真实场景中，fallback 必须覆盖：
- 滚动容器内定位（
offsetParent可能不是body） - 视口边界判断（上/下/左/右空间不足时自动翻转）
- resize 和 scroll 事件监听（anchor 自动响应，JS 必须手动加）
- z-index 和 stacking context 修复（anchor 元素脱离文档流后可能被遮挡）
- 过渡动画衔接（
transform和top/left混用易导致抖动）
生产环境必须用 feature flag + 样式隔离
别把 anchor 样式和 fallback 样式混写在一个 selector 里，比如：
.tooltip {
position: absolute;
left: anchor(--trigger center);
top: anchor(--trigger top);
translate: -50% -100%;
}
这样一旦 anchor 失效，left 和 top 会被清空，元素回到 0,0。正确做法是：
- 用 JS 检测支持后，给
加class="supports-anchor" - anchor 样式只在
.supports-anchor .tooltip下生效 - fallback 样式写在无 class 前缀的
.tooltip下，确保始终兜底 - 所有 anchor 相关的
@media或@supports规则都必须带运行时双重验证
最麻烦的不是写法，是当用户禁用 chrome://flags/#enable-css-anchor-positioning、或升级到 Chrome 126 后 flag 被移除、又或者用了企业定制内核——这些情况 fallback 都得扛住。别指望 CSS 自己“优雅降级”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
