<p>CSS Anchor 定位 API 仅支持将 absolute/fixed 元素按边或中心对齐到带合法 -- 前缀 anchor-name 的相对/绝对定位元素上，不处理交互逻辑、方向翻转、overflow 剪裁及跨浏览器兼容性，生产环境必须 JS 检测并 fallback。</p>
不能只用 CSS Anchor 定位 API 做出“自适应下拉菜单”——它不处理展开/收起逻辑、不响应 hover/focus 状态、不解决 overflow 剪裁或方向翻转，更不兼容 Safari/Firefox。它只负责「把一个 position: absolute 元素，按指定边/中心对齐到另一个元素上」。
锚点元素必须显式声明 anchor-name 且满足定位前提
很多下拉菜单失效，第一关就卡在这里：触发按钮没设对锚点。
-
anchor-name必须是带--前缀的合法 CSS 自定义标识符，--dropdown-trigger✅，dropdown-trigger或#trigger❌ - 锚点元素不能是
display: none；visibility: hidden可以设，但此时锚点不可用（浏览器静默忽略） - 必须搭配
position: relative、absolute或fixed；static下anchor-name被丢弃 - 同一页面多个元素设相同
anchor-name，只有第一个生效 —— 如果你有多个下拉按钮，每个都得用不同名称，比如--menu-1、--menu-2
anchor() 只能在特定属性里用，且目标元素必须是 absolute 或 fixed
下拉菜单 DOM 结构自由了，但 CSS 写法反而更严格：不是所有定位属性都认 anchor()。
- 只支持
top、right、bottom、left、translate、inset-block-start等少数属性；写在margin-top、width、padding里完全无效，也不报错 - 目标菜单元素必须显式声明
position: absolute（或fixed），relative或static下整个anchor()规则被忽略 - 不支持运算：
top: anchor(--dropdown-trigger bottom) + 8px会解析失败；需用margin-top或translate单独偏移 - 旧写法
position-anchor: --xxx和inset-area: top已废弃（Chrome 125+ 移除），现在唯一合法方式是直接在定位属性中调用：top: anchor(--dropdown-trigger bottom)
生产环境必须用 JS 检测并 fallback，不能依赖纯 CSS
截至 2026 年 10 月，CSS Anchor Positioning 仅在 Chrome 125+/Edge 125+ 中可用，且需用户手动开启 chrome://flags/#enable-css-anchor-positioning；Safari 和 Firefox 完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 检测方式必须用
CSS.supports('anchor-name', 'none')或CSS.supports('top', 'anchor(--a top)')，CSS.supports('position-anchor', '--test')是过期写法 - fallback 不能只靠
top: 100%这类静态值 —— 因为真实场景中触发器可能在 flex 容器里、有 transform 位移、或父级有overflow: hidden，必须用getBoundingClientRect()计算位置 - 如果你用 Popover API 实现下拉菜单（
popover属性 +popovertarget），它和 Anchor API 是正交方案：Popover 负责显示/隐藏状态与无障碍，Anchor 负责定位细节；二者可组合，但不能互相替代
真正麻烦的从来不是怎么写 anchor(--x center)，而是当用户用 Safari 打开、或 Chrome 用户没开 flag、或触发器被 transform: translateX(10px) 移动后，菜单突然偏移甚至消失 —— 这些边界情况，CSS 锚点定位本身不处理，必须由 JS 主动兜底。
