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 需配合焦点管理与键盘导航以满足可访问性。