如何将HTML Popover元素相对于父元素定位以实现下拉菜单？

默认情况下，不带属性值的popover属于auto类型，浏览器会强制将其在视口中居中显示，这就是你设置position: absolute无效的原因。要实现popover相对于按钮定位，需要改为manual类型的popover，让浏览器放弃自动控制，交由CSS自定义定位。

具体步骤： #

• 将popover元素的属性改为popover="manual"，解除浏览器的自动定位控制
• 保持父容器的position: relative，作为popover定位的参考容器
• 给popover设置position: absolute，并通过top: 100%、left: 0将其定位在按钮正下方
• 手动控制popover的显示/隐藏（可以用JavaScript或CSS选择器配合:popover-open伪类）

修改后的代码示例： #

Hello world

<div style="position: relative; display: inline-block;">
  <button onclick="document.getElementById('dropdown').togglePopover()">Open Dropdown</button>
  <div popover="manual" id="dropdown" style="position: absolute; top: 100%; left: 0; margin: 0; padding: 8px; background: white; border: 1px solid #ccc; border-radius: 4px;">
    <ul style="margin: 0; padding: 0; list-style: none;">
      <li style="padding: 4px 8px;">Menu Item 1</li>
      <li style="padding: 4px 8px;">Menu Item 2</li>
    </ul>
  </div>
</div>

补充说明： #

• display: inline-block给父容器是为了让它贴合按钮的宽度，避免popover宽度撑满整个父容器
• togglePopover()是Popover API提供的原生方法，用来切换popover的显示状态
• 可以通过:popover-open伪类给显示状态的popover设置额外样式，比如阴影、边框等

内容的提问来源于stack exchange，提问作者Malcolm Crum