css anchor positioning 目前仅chrome 125+/edge 125+支持且需手动开启实验标志，safari/firefox完全不支持；anchor-name须为带--前缀的自定义标识符、设于非hidden且定位元素上，大小写敏感且不可重复；anchor()函数仅限top/right/bottom/left/translate等属性使用，目标元素必须为absolute或fixed；position-anchor和inset-area已废弃；生产环境必须配js fallback。
目前（2026年6月）CSS Anchor Positioning 在 Chrome 125+ 和 Edge 125+ 中可用，但需手动开启实验性标志，且 Safari / Firefox 完全不支持 —— 所以「基本配置」不等于「开箱即用」，它依赖明确的启用条件和严格语法。
anchor-name 必须设在参考元素上，且命名规则不能错
锚点名称不是随便起的 ID，而是带 -- 前缀的 CSS 自定义标识符。浏览器只认这种格式，写成 my-anchor 或 #trigger 都无效。
-
anchor-name只能设在非display: none的元素上；隐藏后锚点自动失效 - 必须搭配
position: relative（或其它定位值），否则部分浏览器会忽略该属性 - 名称区分大小写：
--TooltipAnchor和--tooltipanchor是两个不同锚点 - 不能重复：同一 DOM 中多个元素设相同
anchor-name，只有第一个生效
target 元素必须是 absolute 或 fixed，且 anchor() 函数只能出现在特定属性中
anchor() 不是通用函数，它只被 top、right、bottom、left、translate 等少数属性识别。写在 margin 或 width 里完全没反应，也不会报错 —— 这是最容易卡住的地方。
- 目标元素必须显式声明
position: absolute或position: fixed，static或relative下anchor()会被静默丢弃 - 示例正确写法：
top: anchor(--trigger top); left: anchor(--trigger center); translate: -50% 0; - 错误写法：
margin-top: anchor(--trigger top)（无效）、top: anchor(--trigger top) + 8px（不支持运算） -
anchor-size()同样受限，只能用于width、height、min-width等尺寸属性
position-anchor 属性已被废弃，现在只用 anchor() 函数
早期草案中曾有 position-anchor: --xxx 写法，但截至 Chrome 125，该属性已移除。当前唯一合法方式是直接在定位属性中调用 anchor() 函数 —— 如果你还看到旧文档里用这个，说明资料过期了。
- 不要写：
position-anchor: --trigger;（CSS 解析失败，目标元素退回到默认定位） - 要写：
top: anchor(--trigger bottom);或inset-block-start: anchor(--trigger bottom); -
inset-area也已废弃，不再作为独立属性存在
真正麻烦的不是写法，而是兼容性兜底：一旦用户禁用 flag、用 Safari 打开、或未来某次 Chrome 更新调整行为，整个弹出层就彻底消失。所以生产环境必须配 JS fallback，比如监听 getBoundingClientRect() + absolute 动态计算 —— 不是“可选”，是必做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
