anchor-name必须显式声明且带--前缀，如--tooltip-anchor；锚点元素需非display:none、position为relative/absolute/fixed；target仅top/right/bottom/left/translate等属性支持anchor()；弹出框须设position:absolute或fixed；仅chrome125+/edge125+支持，需js fallback。
anchor-name 必须显式声明且命名合规
锚点元素不写 anchor-name，整个定位链就断了——浏览器根本不会识别它为锚点。最常见错误是把 ID 或 class 当成锚点名，比如写 anchor-name: tooltip 或 anchor-name: #trigger，这全无效。必须用带 -- 前缀的自定义标识符：anchor-name: --tooltip-anchor 才合法。
还要注意三点：该元素不能是 display: none；必须有 position: relative（或 absolute/fixed），static 下会被静默忽略；名称大小写敏感，--Trigger 和 --trigger 是两个不同锚点。
target 元素只能用特定属性调用 anchor()
anchor() 不是万能函数，只被 top、right、bottom、left、translate、inset-block-start 等少数定位属性接受。写在 margin、padding、width（除非配合 anchor-size()）里，完全没反应，也不报错——这是调试时最常卡住的地方。
- ✅ 正确：
top: anchor(--trigger bottom); left: anchor(--trigger center); translate: -50% 0; - ❌ 无效：
margin-top: anchor(--trigger top)、top: anchor(--trigger top) + 8px（不支持运算）、width: anchor(--trigger width)（该用anchor-size(--trigger width)）
目标弹出框必须是 position: absolute 或 fixed
哪怕 anchor() 写对了，如果弹出框是 position: static 或 relative，浏览器会直接忽略所有 anchor() 调用，退回到默认文档流或相对定位行为。必须显式声明：position: absolute（推荐）或 position: fixed。
另外，别再用已废弃的 position-anchor 和 inset-area：Chrome 125+ 已移除它们。写 position-anchor: --trigger 不仅无效，还会导致整条 CSS 规则失效。
生产环境必须检测并 fallback 到 JS 计算
截至 2026 年 10 月，仅 Chrome 125+/Edge 125+ 支持该特性，且需用户手动开启 chrome://flags/#enable-css-anchor-positioning；Safari 和 Firefox 完全不支持。靠 CSS.supports('position-anchor', '--test') 检测已不可靠（该属性已被移除），应改用：CSS.supports('top: anchor(--a top)')。
一旦检测失败，必须立刻切换到 getBoundingClientRect() + transform 的传统方案。最容易被忽略的是：锚点元素若被 transform 移动，anchor 定位不会跟随——这点和 JS 计算逻辑完全不同，但文档极少强调。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
