锚点定位需满足多项硬性条件：anchor-name必须带--前缀、元素不能display:none、须为relative/absolute/fixed定位、anchor()仅用于top/right/bottom/left/translate等属性，且仅Chrome125+/Edge125+支持并需开启实验标志。
锚点定位不是“写完就跑”的功能，它只在特定结构、特定浏览器、特定启用状态下生效；不满足任一硬性条件，anchor() 规则会被浏览器静默忽略，元素直接 fallback 到 top: 0; left: 0。
anchor-name 必须显式声明且带 -- 前缀
这是最常被跳过的第一步。锚点名不是 ID、class 或 data 属性，必须是 CSS 自定义标识符格式：
-
--tooltip-trigger✅ 合法 -
tooltip-trigger❌ 无前缀，无效 -
#trigger❌ 是选择器语法，非锚点名 -
data-anchor="trigger"❌ HTML 属性不参与 anchor-name 解析
同时需满足：
- 元素不能是
display: none（设了就失效） - 可以是
visibility: hidden，但隐藏后锚点立即不可用 - 必须搭配
position: relative/absolute/fixed；static下anchor-name被静默丢弃 - 大小写敏感：
--Trigger和--trigger是两个不同锚点
anchor() 只能在有限属性中使用
anchor() 不是通用计算函数，仅被以下 CSS 属性识别：
立即学习“前端免费学习笔记（深入）”；
-
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 年 10 月，仅 Chrome 125+/Edge 125+ 支持，且需用户手动开启 chrome://flags/#enable-css-anchor-positioning；Safari 和 Firefox 仍不支持。
检测不能用已失效的语法：
-
CSS.supports('position-anchor', '--test')❌ 错误 API，返回 false -
CSS.supports('top', 'anchor(--x top)')✅ 正确检测方式
fallback 逻辑建议：
- 用
@supports not (top: anchor(--x top))包裹锚点规则 - 外层提供 JS 回退：监听
scroll/resize，用getBoundingClientRect()动态设置top/left - 避免只依赖 CSS，否则在不支持环境里弹窗会塌缩到左上角
真正稳妥落地的场景目前只有工具提示（Tooltip）——触发元素始终可见、DOM 结构松散、允许降级为 JS 计算。其他如模态框、复杂下拉菜单，仍建议优先用 Popper.js 类库，CSS 锚点定位现阶段更适合做增强而非替代。
