css anchor positioning 仅在 chrome/edge 125+ 中通过手动启用实验标志支持，safari 和 firefox 完全不支持且无实验入口，生产环境必须搭配 js fallback，废弃语法如 position-anchor 已移除，正确写法为 top: anchor(--x top) 或先设 anchor-name 再用 anchor(top)。
Chrome 125+ 和 Edge 125+ 支持，但需手动开启实验标志
截至 2026 年 7 月，CSS Anchor Positioning 仅在 Chrome 125 及更高版本、Edge 125 及更高版本中可用，且默认**不启用**。用户必须手动打开实验性功能开关：
- Chrome 地址栏输入
chrome://flags/#enable-css-anchor-positioning，设为 Enabled - Edge 地址栏输入
edge://flags/#enable-css-anchor-positioning，同样启用 - 重启浏览器后才生效 —— 不开 flag 就等于没支持
Safari 和 Firefox 完全不支持，无实验开关
Apple Safari 和 Mozilla Firefox 当前（2026 年 7 月）**未实现该特性，也未提供任何实验性入口**。MDN 和 caniuse 数据均标注为「No support」。这意味着：
- 写
anchor-name: --x;或top: anchor(--x top);在 Safari/Firefox 中会被完全忽略，不会报错，也不会 fallback - 无法通过
@supports检测，因为语法本身不被识别（不是属性值不支持，而是整个规则块被丢弃） - 别指望未来几个月内上线 —— Safari 已明确表示暂无实现计划，Firefox 也未进入草案讨论阶段
“支持”不等于“可用”，生产环境必须配 JS fallback
即使用户开了 flag，也不能当作稳定支持。真实场景中极易失效：
- 锚点元素
display: none或visibility: hidden时，anchor()返回0px，导致目标元素突然跳到左上角 - 锚点元素不在当前视口（如滚动出屏），部分 Chrome 版本会停止更新位置，造成错位
-
anchor-size()在缩放或字体加载完成前可能返回旧尺寸，引发布局抖动 - 没有 polyfill：JS 模拟无法复现原生的滚动/缩放自动响应能力，只能做静态快照定位
废弃属性仍在文档里乱传，务必核对语法有效性
网上很多教程还在用已移除的写法，实际会导致定位完全失效：
- ❌
position-anchor: --x;—— 该属性自 Chrome 125 起已被移除，CSS 解析失败 - ❌
inset-area: top;—— 同样废弃，不再作为独立属性存在 - ✅ 正确方式只有两种：
top: anchor(--x top);（显式）或先设position-anchor: --x;再写top: anchor(top);（隐式，但仅限单锚点） - 注意大小写：
--TooltipAnchor和--tooltipanchor是两个不同锚点，拼错即失效
anchor() 都得配一套 JS 逻辑兜底，否则用户一换浏览器或忘了开 flag，整个弹层就消失或错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
