anchor-name 必须以--开头且作用于非display:none元素，仅支持top/right/bottom/left等特定属性，需position:absolute/fixed，@supports应检测anchor-name，chrome125+默认支持，safari/firefox暂不支持。
anchor-name 必须带 -- 前缀且设在非 display:none 元素上
这是最常被忽略的硬性门槛：浏览器遇到 anchor-name: tooltip-anchor 或 anchor-name: #trigger 会直接静默忽略整条规则，不报错也不生效。唯一合法格式是 anchor-name: --tooltip-anchor，必须以双短横线开头，符合 CSS 自定义属性命名规范。
同时，该属性只能作用于 display: block、inline-block、flex 等非 none 的元素。设在 display: none 的触发按钮上？锚点彻底失效。设在 visibility: hidden 的元素上？可以注册，但一旦隐藏，后续 anchor() 计算将回退为 0，浮层可能飞走。
- 锚点元素需显式加
position: relative（或absolute/fixed），static下anchor-name被丢弃 - 名称大小写敏感：
--Trigger和--trigger是两个独立锚点 - 同一 DOM 中重复设置相同
anchor-name，仅第一个生效，后设的无效
anchor() 只能用在特定定位属性里
anchor() 不是通用计算函数，它只被少数几个 CSS 属性识别：包括 top、right、bottom、left、translate、inset-block-start、inset-inline-end 等。写错位置不会报错，但毫无效果。
例如 margin-top: anchor(--trigger top) 或 width: anchor-size(--trigger width)（除非用在 width 属性本身）都会被浏览器跳过。更隐蔽的是运算表达式：top: anchor(--trigger bottom) + 8px 会解析失败，必须拆成 top: anchor(--trigger bottom); margin-block-end: 8px。
- 目标浮层必须是
position: absolute或position: fixed，relative或static下anchor()完全不触发 - 避免使用已废弃的
position-anchor和inset-area：Chrome 125+ 已移除，写了反而导致整个定位规则失效 - 推荐用
inset简写，但每个值仍需单独调用：inset: anchor(--trigger top) auto anchor(--trigger bottom) anchor(--trigger center)
@supports 检测必须用 anchor-name，不是 position-anchor
检测支持性时，不能写 @supports (position-anchor: --test) —— 这个属性早已废弃，检测永远返回 false。正确方式是检测 anchor-name 是否被识别：
if (CSS.supports('anchor-name', '--test')) { /* 启用 anchor 定位 */ }
或者用 CSS @supports 规则包裹：
@supports (anchor-name: --a) {
.tooltip {
position: absolute;
top: anchor(--trigger bottom);
left: anchor(--trigger center);
translate: -50% 0;
}
}
注意：这个检测只说明浏览器“认识” anchor-name，不代表完整支持所有 anchor() 行为。实际项目中仍需 JS fallback 处理 Safari / Firefox / 旧 Chrome。
- 截至 2026 年 9 月，仅 Chrome 125+ / Edge 125+ 默认启用，且需用户未禁用
chrome://flags/#enable-css-anchor-positioning - Safari 和 Firefox 官方明确暂无实现计划，不能依赖 CSS-only 方案
- 生产环境必须保留 JS 定位逻辑（如 Popper.js 或手动
getBoundingClientRect），用 CSS 仅作渐进增强
智能定位的关键在于组合 anchor() 与 translate/margin
所谓“智能”，不是靠单个 anchor() 实现的，而是靠多个锚点函数 + 偏移控制的组合。比如让浮层底部紧贴触发元素顶部、水平居中，同时加 4px 间距：
.tooltip {
position: absolute;
bottom: anchor(--trigger top);
left: anchor(--trigger center);
translate: -50% 4px;
}
这里 translate: -50% 对齐中心，4px 是向下偏移（因 bottom 锚定的是触发元素顶部，浮层底部对齐后还需下移一点露出箭头）。若想加箭头，通常用 ::before 并配合 anchor() 定位其尖端。
- 不要试图用
anchor-size()控制宽高——它目前仅在width、height、max-width等尺寸属性中有效，且兼容性更差 - 视口溢出仍需 JS 处理：CSS anchor 不自动翻转或调整位置，
@container或 ResizeObserver 配合仍是必需 - 多个锚点可共存，但需确保 DOM 中只有一个元素声明了目标
anchor-name，否则行为不可预测
真正落地时，最易被忽略的不是语法，而是把 anchor-name 当作一次性开关——它本质是运行时引用。只要锚点元素存在、可见、未被销毁，浮层就能持续响应其位置变化（包括动画、滚动、resize）。但一旦触发元素被 display: none 或从 DOM 移除，锚点立即失效，JS fallback 必须兜底接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
