anchor-name 必须以--开头且元素不能display: none，否则锚点定位失效；需配合position-area和anchor()函数使用，且元素必须为relative/absolute/fixed定位并设置z-index。
anchor-name 必须带 -- 前缀且元素不能 display: none
锚点定位失效的第一原因，就是 anchor-name 写错了。它不是 ID、class 或任意字符串，必须是合法的 CSS 自定义标识符：以 -- 开头，只含字母、数字、下划线和短横线。例如 --tooltip-anchor 可用，tooltip-anchor、#trigger、data-anchor 全部被浏览器静默忽略。
同时，声明 anchor-name 的元素必须处于可渲染状态——display: none 会直接让锚点“消失”，哪怕只是临时隐藏也不行；visibility: hidden 或 opacity: 0 是安全的，但要注意视觉上不可见时用户仍可能触发交互。
-
anchor-name只在position: relative、absolute或fixed元素上生效，static下完全不注册 - 若锚点元素是动态插入的，需确保 DOM 已挂载、样式已计算后再触发 tooltip 显示，否则首次定位可能取不到位置
- Chrome 125+ / Edge 125+ 默认支持，但需确认未禁用
chrome://flags/#enable-css-anchor-positioning
position-anchor 和 position-area 配合控制方位
position-anchor 是绑定关系，position-area 才决定具体落点。比如想让 tooltip 出现在按钮下方居中，不能只靠 top: anchor(bottom)，还要用 position-area: block-end 明确语义方向——这会影响浏览器对边界溢出（overflow）的自动调整逻辑。
常见组合：
- 上方提示：
position-area: block-start+bottom: anchor(top) - 右侧提示：
position-area: inline-end+left: anchor(right) - 左上角贴边：
position-area: block-start inline-start+top: anchor(top)left: anchor(left)
注意：position-area 不是装饰属性，它参与浏览器的自动避让计算。省略它可能导致 tooltip 在屏幕边缘被截断，或无法触发翻转（flip）行为。
top/right/bottom/left 必须搭配 anchor() 函数，不能混用旧定位值
一旦启用锚点定位，top、right 等偏移属性就不再是像素值或百分比，而必须调用 anchor() 函数，参数是锚点名和方位关键词。例如 top: anchor(--btn top) 表示“本元素的 top 边缘对齐锚点元素的 top 边缘”。
常见错误写法：
-
top: 10px—— 锚点模式下会被忽略，回到 static 布局流 -
top: anchor(--btn) + 10px—— 语法非法，CSS 不支持表达式运算 -
transform: translateY(-100%)试图微调 —— 锚点定位后 transform 仍有效，但优先用anchor()的偏移参数更可控，如top: anchor(--btn top -10px)
目前支持的 anchor() 偏移语法包括：top、bottom、left、right、center、inline-start、inline-end、block-start、block-end，以及带单位的偏移量（如 top -5px）。
必须用 position: fixed 或 position: absolute，z-index 才生效
锚点定位本身不改变元素的层叠上下文。如果你发现 tooltip 被遮挡，大概率是因为没设 position 或 z-index 白写了。锚点元素和 tooltip 元素都必须显式声明定位方式——position: fixed 最稳妥（不随滚动偏移），position: absolute 则依赖父级是否已定位。
关键细节：
-
z-index只对已定位元素起作用，position: static下写z-index: 9999完全无效 - 如果 tooltip 插在 modal 内部，而 modal 用了
overflow: hidden或clip-path，即使position: fixed也会被裁剪——此时只能把 tooltip 挂到body下，并用 JS 同步 visibility - 多个 tooltip 共存时，避免全局
* { z-index: 0 }重置规则，它会破坏锚点元素的层叠层级
真正难处理的不是定位本身，而是当锚点元素在滚动容器内、又被 transform 或 scale 缩放过时，浏览器对 anchor() 的坐标解析会出现偏差——这种场景目前仍需降级为 JS 计算 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
