CSS Anchor Positioning 与 Popover/Dropdown 布局稳定性实践

概述CSS Anchor Positioning 为弹层类组件提供更可靠的锚点定位能力，相比手写计算更稳健；与 Popover API 组合可兼顾语义与可访问性。实践示例<button id="btn" popover-target="menu">打开菜单</button>

<div id="menu" popover>...</div>

#btn { anchor-name: --btn }

#menu {

position: absolute;

inset-area: anchor(--btn);

position-try: below right, below left;

}

验证方法在窗口缩放与滚动下观察定位是否稳定；切换锚点位置验证 `position-try` 回退策略。注意事项旧版浏览器不支持需回退到 JS 计算；Popover 需配合焦点管理与键盘导航以满足可访问性。