Chrome 125+/Edge 125+ 支持 anchor() 纯 CSS 锚点定位，但需满足显式声明 -- 前缀 anchor-name、非 display: none、position 为 absolute/fixed 等硬性条件，否则静默失效且无降级。
Chrome 125+ 和 Edge 125+ 中能用 anchor() 实现纯 CSS 锚点定位，但不是写完就生效——不满足任一硬性条件，浏览器会静默忽略整条规则，元素直接 fallback 到 top: 0; left: 0。
anchor-name 必须显式声明且带 -- 前缀
这是最常漏掉的第一步。锚点名不是 ID、class 或 data 属性，必须是合法的 CSS 自定义标识符格式：
-
--tooltip-trigger✅ 合法 -
tooltip-trigger❌ 缺少--前缀，无效 -
#trigger❌ 是选择器语法，非锚点名 -
data-anchor="trigger"❌ HTML 属性不参与解析
同时需满足：
- 元素不能是
display: none（设了就失效） - 可以是
visibility: hidden，但隐藏后锚点立即不可用 - 必须搭配
position: relative/absolute/fixed；static下anchor-name被静默丢弃 - 大小写敏感：
--Trigger和--trigger是两个不同锚点
anchor() 只能在特定 CSS 属性中使用
anchor() 不是通用计算函数，仅被以下属性识别：
立即学习“前端免费学习笔记（深入）”；
-
top/right/bottom/left -
translate/inset-block-start/inset-inline-start等inset相关属性
常见错误写法：
-
margin-top: anchor(--trigger top)❌margin不支持 -
width: anchor-size(--trigger width)❌ 必须用在width属性本身，不能套在其他属性里 -
top: anchor(--trigger bottom) + 4px❌ 不支持运算，会解析失败
正确示例：
.tooltip {
position: absolute;
top: anchor(--trigger bottom);
left: anchor(--trigger center);
translate: -50% 0;
margin-top: 4px;
}目标元素必须是 absolute 或 fixed 定位
使用 anchor() 的元素（即锚定元素）必须是 position: absolute 或 position: fixed：
-
position: static或relative下，整个anchor()规则被忽略 - 祖先元素若含
overflow: hidden或transform，旧版 Chrome（≤126）可能中断锚点跟随（Chrome 127 已修复部分） - 已废弃的
position-anchor和inset-area写法（如position-anchor: --x）在 Chrome 125+ 中直接失效，不要用
生产环境必须配 JS fallback
截至 2026 年 11 月，仅 Chrome 125+/Edge 125+ 支持，且需手动开启 chrome://flags/#enable-css-anchor-positioning；Safari 和 Firefox 完全不支持。
检测是否可用：
if (CSS.supports('position-anchor', '--test')) {
// 启用 anchor 定位
} else {
// 回退到 getBoundingClientRect()
}真正容易被忽略的是：即使所有 CSS 条件都满足，只要浏览器未启用实验标志，或用户用的是 Safari/Firefox，anchor() 就完全不执行——它不会报错，也不会降级，只是静默失效。别指望它“自动兜底”。
