前端Wiki/词条/CSS 锚点定位

CSS 锚点定位

定义用锚元素的位置定位另一个元素（如 popover/tooltip 跟随按钮），配合锚点自动翻转

popover 跟随触发按钮：以前只能靠 JS 监听 resize/scroll 实时算位置。CSS 锚点定位写 position: anchor(anchor-name ...)，元素就像挂在锚点上一样，锚点移动它自动跟着，甚至能用 position-try 自动翻转，空间不够时换到另一侧。

这是 2024 后浏览器才原生支持的能力（Chrome 率先），配合 popover 属性几乎可以零 JS 做菜单、提示条、下拉组合。配合 @position-try 规则可声明多套兜底位置。

锚元素用 anchor-name 命名，定位元素用 position: anchor(...) 引用
position-try + 自动翻转让 popup 空间不足时翻到对侧
配合 popover 属性实现零 JS 菜单与工具提示

HTML

<style>
  .btn { anchor-name: --menu; }
  .pop { position: absolute; position-anchor: --menu;
         top: anchor(bottom); left: anchor(left);
         position-try: flip-block; }
</style>
<button class="btn" popovertarget="p">打开菜单</button>
<div class="pop" id="p" popover>菜单自动吸附在按钮下方</div>

⚠ 常见误区

锚点与 popover 元素分属不同层叠上下文时定位失效
resize/scroll 时不更新（旧浏览器不支持），需 JS 兜底
忘记空间检测：靠近视口边缘时菜单跑出屏幕外

🔗 相关词条position 定位自适应与媒体查询