chrome/edge 125+支持但需手动开启实验标志，safari/firefox不支持；anchor-name必须为--前缀的自定义标识符、设于非hidden且定位元素上；anchor()仅限top/right/bottom/left/translate等属性使用，目标元素须为absolute或fixed；position-anchor和inset-area已废弃；生产环境必须配js fallback。
Chrome/Edge 125+ 可用，但必须手动开启实验标志且无 Safari/Firefox 支持；生产环境不能直接用，得配 JS fallback。
anchor-name 必须设在定位元素上且带 -- 前缀
锚点名不是 ID 或 class，写成 anchor-name: tooltip 或 anchor-name: #trigger 都无效。只能是 CSS 自定义标识符格式：anchor-name: --tooltipAnchor。
- 该属性必须设在非
display: none的元素上，隐藏后锚点即失效 - 目标元素需有定位（
position: relative、absolute等），否则部分浏览器静默忽略 - 大小写敏感：
--TooltipAnchor和--tooltipanchor是两个不同锚点 - 同一 DOM 中重复设置相同
anchor-name，只有第一个生效
target 元素只能用 absolute/fixed，且 anchor() 只认特定属性
anchor() 不是通用函数，它只被 top、right、bottom、left、translate、width、height 等少数属性识别。
- 错误写法：
margin-top: anchor(--trigger top)（完全无效，也不报错） - 错误写法：
top: anchor(--trigger top) + 8px（不支持运算） - 正确写法：
top: anchor(--trigger bottom); left: anchor(--trigger center); translate: -50% 0; -
position-anchor和inset-area已废弃，当前唯一合法方式是直接在定位属性中调用anchor()
必须配 JS fallback，否则 Safari/Firefox 用户看不到弹出层
CSS Anchor Positioning 目前仅 Chrome 125+/Edge 125+ 支持，且需用户手动开启 chrome://flags/#enable-css-anchor-positioning —— 这意味着默认关闭，普通用户几乎不可能触发。
- 不要依赖
@supports (anchor-name: --x)做兼容检测，它无法反映实际启用状态 - 稳妥做法：用 JS 检测
CSS.supports('position', 'anchor') === false或直接监听anchor()解析失败（靠 fallback 样式兜底） - fallback 逻辑应复用传统方案：用
getBoundingClientRect()计算位置，动态设style.left/style.top，并处理边界与滚动 - 注意移动端：
clientX/clientY要换成touches[0].clientX，否则 touch 事件不响应
真正麻烦的不是语法对不对，而是你写的 anchor(--trigger top) 在 Safari 里根本没解析，连 warning 都没有——它就当那行 CSS 不存在，然后弹层按默认 static 渲染，彻底消失。别等上线才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
