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% 与移动端视口下定位稳定，无溢出与遮挡问题