锚点定位需满足硬性条件：锚点元素必须显式声明带--前缀的anchor-name且非display:none、搭配relative/absolute/fixed定位；anchor()仅用于top/right/bottom/left/translate等特定属性；仅chrome125+/edge125+支持且需开启实验标志，须配js fallback。
现在用 anchor-name 和 anchor() 能直接定位浮层，但必须满足几个硬性条件，否则根本不会动——不是写错，是浏览器直接忽略。
锚点元素必须显式声明 anchor-name 且带 -- 前缀
这是最常卡住的第一步。锚点名不是 ID 或 class，必须是 CSS 自定义标识符格式：--tooltip-anchor 合法，tooltip-anchor、#trigger、data-anchor 全部无效。
-
anchor-name只能设在非display: none的元素上；设了visibility: hidden可以，但隐藏后锚点失效 - 必须搭配
position: relative（或absolute/fixed），static下该属性被静默丢弃 - 名称大小写敏感：
--Trigger和--trigger是两个锚点 - 同一 DOM 中重复设置相同
anchor-name，只有第一个生效
anchor() 函数只能用于特定定位属性
它不是通用函数，只被 top、right、bottom、left、translate、inset-block-start 等少数属性识别。写错位置不报错，但毫无效果。
- ✅ 正确：
top: anchor(--trigger bottom); left: anchor(--trigger center); translate: -50% 0; - ❌ 无效：
margin-top: anchor(--trigger top)、width: anchor-size(--trigger width)（除非用在width属性里） - ❌ 不支持运算：
top: anchor(--trigger bottom) + 8px会解析失败 - 目标元素必须是
position: absolute或position: fixed；relative或static下anchor()被忽略
不要用已废弃的 position-anchor 和 inset-area
Chrome 125+ 已移除这两个属性。旧文档里还写着 position-anchor: --trigger，那是过期写法，实际会导致整个定位规则失效。
- ❌ 废弃写法：
position-anchor: --trigger; inset-area: top; - ✅ 当前唯一合法方式：
top: anchor(--trigger top); inset-inline-start: anchor(--trigger center); -
inset可以简写，但每个值仍需调用anchor()：inset: anchor(--trigger top) auto anchor(--trigger bottom) anchor(--trigger center);
生产环境必须配 JS fallback
截至 2026 年 7 月，仅 Chrome 125+/Edge 125+ 支持，且需手动开启 chrome://flags/#enable-css-anchor-positioning；Safari 和 Firefox 完全不支持。这意味着不能只靠 CSS。
- 检测是否支持：
if (CSS.supports('position-anchor', '--test')) { /* 启用 anchor 定位 */ } else { /* 回退到 getBoundingClientRect + JS 定位 */ } - 注意：transform 引起的位移不会触发 anchor 重计算；祖先元素有
position: relative也可能干扰跟随逻辑 - 滚动时自动避让、边界翻转等高级行为目前仅在 Chrome 实验标志下部分可用，不可依赖
真正麻烦的不是语法，而是你写了半天发现没反应——大概率是浏览器不支持、锚点没激活、或者 anchor() 写在了错误属性里。先查 CSS.supports，再确认锚点元素渲染状态和定位上下文，最后核对函数调用位置。漏掉任意一环，浮层就「悬空」了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
