anchor()函数专用于absolute/fixed元素的相对定位，非传统锚点跳转；需参考元素设anchor-name、目标元素脱离文档流、anchor()写在top/left等支持属性中，Chrome/Edge实验性支持。
anchor() 函数目前（2026 年中）不能直接用于传统锚点跳转，它不是 href="#id" 的替代品，而是专为 position: absolute 或 position: fixed 元素设计的**相对参考元素定位工具**——比如 tooltip、popover、菜单浮层。用错场景或写法，样式会静默失效，浏览器不报错，但完全没反应。
anchor() 为什么对 float / static 元素无效
根本原因是：CSS 锚点定位是一套脱离文档流的新模型，和浮动（float）、普通流内布局（position: static）互斥。
-
float元素仍参与行盒排布，而anchor()要求目标必须明确脱离流（即position: absolute或fixed） - 即使给
float元素强行加position: absolute，float属性本身也会被浏览器忽略（CSS 规范强制） -
anchor(--ref top)这类声明只在定位上下文中解析；position: static元素上写的top值会被直接丢弃
正确使用 anchor() 的三要素
缺一不可，否则不生效：
- 参考元素必须设置
anchor-name: --xxx（名称以--开头，区分大小写） - 目标元素必须是
position: absolute或position: fixed -
anchor()必须写在top/right/bottom/left或translate等支持函数的属性值中，例如top: anchor(--trigger bottom)
示例（按钮上方居中显示 tooltip）：
立即学习“前端免费学习笔记（深入）”；
<button style="anchor-name: --trigger;">触发按钮</button>
<div class="tooltip">提示文本</div>
<p>.tooltip {
position: absolute;
top: anchor(--trigger top);
left: anchor(--trigger center);
translate: -50% -8px; /<em> 左移自身一半宽度，上移 8px </em>/
}浏览器支持与启用方式
截至 2026 年 5 月，仅 Chrome 和 Edge（基于 Chromium）支持该特性，且需手动开启实验标志：
- 访问
chrome://flags/#enable-css-anchor-positioning→ 启用 - Firefox 尚未实现，Safari 无公开支持计划
- 无需 polyfill，但也不具备渐进增强能力：关掉标志或换浏览器，就彻底回退到无样式状态（不会报错）
注意：anchor-name 不继承，不作用于伪元素，也不能用 JS 动态修改（目前规范不支持 runtime 更新锚点名）。
容易被忽略的关键细节
anchor(--ref top) 中的 top 指的是**参考元素的 top 边界**，不是目标元素自己的 top；初学者常误以为这是“让目标元素顶部对齐参考元素顶部”，其实它是“把目标元素的当前属性（如 top）值设为参考元素 top 的坐标”。另外，anchor(--ref center) 返回的是参考元素水平中心的绝对像素值，可直接用于 left，但配合 translate: -50% 才能真正居中——这点不靠 JS 很难直观验证，建议用 DevTools 实时改值观察效果。
