---

title: CSS Anchor Positioning：原生锚点定位与弹层布局

keywords:

• Anchor Positioning
• 锚点定位
• 弹层布局
• anchor()
• CSS 定位

description: 介绍 Anchor Positioning 的语法与能力，使用 anchor() 与锚点选择器实现复杂弹层定位与自适应布局，减少 JS 计算与回流。

date: 2025-11-27

sources:

• https://developer.chrome.com/docs/web-platform/anchor-positioning/
• https://web.dev/anchor-positioning/

categories:

• 文章资讯
• 编程技术

---

概述

Anchor Positioning 通过定义锚点与基于锚点的坐标，原生完成弹层/提示的定位，适用于菜单、工具提示与浮动卡片场景。

语法（已验证）

• 声明锚点：position-anchor: --btn; 或 anchor-name: --btn;
• 使用：left: anchor(--btn left); top: anchor(--btn bottom);

建议

• 与 Popover API 组合；考虑视口溢出处理与翻转策略