CSS Popover API 与 Anchor Positioning 实践 无样式弹层与定位治理

概览原生 Popover 提供无样式弹层的基础行为与可访问性，Anchor Positioning 则允许以锚点精确定位弹层。两者组合能在保持轻量的同时提供稳定的交互与布局治理。基础结构<button id="trigger" popovertarget="menu">菜单</button> <div id="menu" popover> <ul> <li>项目 A</li> <li>项目 B</li> </ul> <button popovertarget="menu" popovertargetaction="hide">关闭</button> </div> 定位与样式#trigger { anchor-name: --trigger; } #menu[popover] { position: fixed; position-anchor: --trigger; top: anchor(bottom); left: anchor(center); transform: translateX(-50%); padding: 0.5rem 0.75rem; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); background: white; } @media (prefers-reduced-motion: reduce) { #menu[popover] { transition: none; } } 交互治理使用 `popovertarget` 与 `popovertargetaction` 控制显示与关闭，避免额外 JS。保持弹层在视口内：在窄视口下调整 `top/left` 为安全位置或使用容器内定位。通过 `role` 与 `aria` 提供语义，确保键盘导航与读屏器体验。验证与指标浏览器：Popover API（Chrome 120+、Safari 17+、Firefox 120+）；Anchor Positioning（Chrome 125+）在缩放 125% 与移动端视口下定位稳定，无溢出与遮挡问题