anchor-name必须带--前缀且设在定位元素上，大小写敏感，仅对非隐藏、有定位上下文的元素生效；target元素须为absolute/fixed，anchor()仅支持inset类属性，Chrome/Edge需开启实验标志，Safari/Firefox不支持。
anchor-name 必须带 -- 前缀且设在定位元素上
锚点名称不是 ID 或 class，而是 CSS 自定义标识符，必须以 -- 开头，比如 --tooltip-anchor。写成 tooltip-anchor 或 #trigger 都不会生效。
这个属性只能加在「非隐藏、有定位上下文」的元素上：display: none 的元素会直接丢弃锚点；position: static（默认值）下部分浏览器也会忽略 anchor-name，稳妥起见至少设 position: relative。
- 大小写敏感：
--Tooltip和--tooltip是两个不同锚点 - 同一 DOM 中重复设置相同
anchor-name，只有第一个元素生效 - 不能用 JS 动态插入后补
anchor-name—— 浏览器只在样式计算阶段读取，运行时修改不触发重锚定
target 元素必须是 absolute/fixed，且 anchor() 只能用于 inset 属性
anchor() 不是通用函数，它只被 top、right、bottom、left、inset-block-start、inset-inline-end、translate 等 inset 类属性识别。写在 margin、width、transform（除 translate 外）里完全无效，而且不报错 —— 这是最常卡住的地方。
目标元素还必须显式声明 position: absolute 或 position: fixed。position: static 或 relative 下，anchor() 会被静默丢弃，元素退回到常规流布局。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
top: anchor(--trigger bottom); left: anchor(--trigger center); translate: -50% 0; - 错误写法：
margin-top: anchor(--trigger top)（无效）、top: anchor(--trigger top) + 8px（不支持运算） -
justify-self: anchor-center是合法的居中方式，但仅适用于display: grid或 flex 容器内的子项，对普通absolute元素无效
Chrome/Edge 需手动开启实验标志，Safari/Firefox 完全不支持
截至 2026 年 9 月，CSS Anchor Positioning 仅在 Chrome 125+ 和 Edge 125+ 中可用，且需手动开启 chrome://flags/#enable-css-anchor-positioning 实验性标志。Safari 和 Firefox 当前无任何实现计划 —— 不是“未完成”，而是规范未进入它们的优先队列。
这意味着：生产环境不能只靠纯 CSS 锚点定位。你必须提供 JS fallback，比如用 getBoundingClientRect() 计算位置，并监听 resize、scroll、intersectionObserver 处理滚动出视口等边界情况。
- 不要用
position-anchor或inset-area：这两个属性已在 Chrome 125 中废弃，继续使用会导致解析失败 - 不要依赖 transform 位移：锚点元素若靠
transform移动（而非 layout 位移），锚定元素不会跟随 —— 浏览器只响应 layout 变化 - 祖先元素设了
position: relative且溢出隐藏，可能截断锚定元素：虽然定位脱离了文档流，但渲染仍受祖先overflow影响
显式 anchor() 比隐式更可控，尤其多锚点场景
隐式写法（position-anchor: --trigger + top: anchor(top)）适合一对一绑定，但一旦页面中多个触发元素共用一个弹出层（如工具栏按钮共用同一个 tooltip），就必须用显式写法：top: anchor(--btn-a bottom)、left: anchor(--btn-b right)。这样可以混合引用不同锚点，也能避免 position-anchor 被覆盖的问题。
注意：显式调用时，锚点名必须和 anchor-name 完全一致（包括 -- 和大小写），且不能省略空格 —— anchor(--triggerbottom) 是错的，必须是 anchor(--trigger bottom)。
- 显式写法允许单个属性里混用多个锚点：
left: anchor(--left-trigger right); right: anchor(--right-trigger left); - 不支持动态切换锚点：无法用媒体查询或伪类临时改
anchor()参数，锚点关系在样式解析时就固定了 -
anchor-size()同样受限，只能用于width、height、min-width等尺寸属性，不能用于font-size或padding
真正麻烦的不是语法，而是它只在特定浏览器里「看起来能用」—— 一旦用户切到 Safari，或公司内网强制锁定旧版 Chrome，整套定位逻辑就彻底失效。别把 fallback 当补充，它才是生产环境的主干逻辑。
