CSS Anchor Positioning目前未被任何主流浏览器支持，仍处于草案阶段，Chrome 124+、Firefox 125+、Safari TP 208均未实现，CanIUse与MDN均标注“No support”；生产环境必须使用position: absolute + relative容器配合JS计算的兼容方案。
目前主流浏览器**不支持 CSS Anchor Positioning**（即 anchor-name、position-anchor 等属性），它仍处于 CSS Working Group 的草案阶段，尚未进入正式推荐标准，也未被 Chrome、Firefox 或 Safari 实现。你在生产项目中直接使用会完全失效。
为什么 anchor-name 在浏览器里没反应
你写的 anchor-name: --my-button; 或 position-anchor: --my-button; 不会触发任何定位行为——因为这些属性当前只是实验性语法，没有解析器支持。DevTools 里甚至不会显示它们，控制台也不会报错，只会静默忽略。
- Chrome 最新稳定版（124+）未启用该特性，
chrome://flags中无对应开关 - Firefox 125+ 同样未实现，
about:config中查不到相关 pref - Safari 技术预览版（TP 208）仍未列入支持列表
- CanIUse 和 MDN 均标注为 “No support”（截至 2026 年 5 月）
替代方案：用 position: absolute + relative 父容器模拟锚点
这是当前唯一可靠、兼容所有现代浏览器的“锚定式”弹出实现方式。核心不是靠 CSS 新语法，而是靠 DOM 结构约束和 JS 动态计算。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把触发元素（如按钮）和弹出层放在**同一个
relative容器内**，确保弹出层的absolute定位基准是它 - 用 JS 读取触发元素的
getBoundingClientRect()，手动设置弹出层的top/left值 - 若需响应式对齐（如“按钮右下角弹出”），优先用
top: 100%+right: 0，再配合transform: translateY(-100%)微调 - 避免依赖
offsetTop/offsetLeft，它们受scroll和transform影响，容易错位
position: fixed 适合全屏锚定场景，但要注意滚动偏移
当弹出层需要“相对于视口固定位置”（例如底部消息条、右下角通知），position: fixed 是更合适的选择，但它和锚点无关——你得自己算坐标。
立即学习“前端免费学习笔记（深入）”；
- 用
fixed时，top/right值是相对于视口边缘的，不受父容器影响 - 如果触发按钮在滚动区域内部，而你想让弹出层始终贴着按钮“视觉位置”，就不能用
fixed，否则滚动时会脱钩 - 常见错误：给
fixed元素设left: 50%却忘了加transform: translateX(-50%)，导致居中失败 - z-index 生效前提仍是
position不为static，且父级不能意外创建堆叠上下文（如带opacity: 0.99的 wrapper）
真正要等 Anchor Positioning 落地，至少还需 1–2 年；现在硬上，等于把功能写进空气里。最易被忽略的是：很多人以为加了 anchor-name 就能自动对齐，却没意识到连基础解析都不存在——连语法高亮都不会出现。
