如何将HTML popover置于flexbox父容器并固定在视口底部？

原生的popover属性元素（比如你代码里的<div popover="manual">）有个特殊特性：浏览器会自动将它移到顶层弹出层容器中，脱离原有的DOM文档流，所以它完全不受父元素的Flex布局影响——这就是你当前代码无效的核心原因。

要实现将popover固定在视口底部，有两种可行方案：

方案1：放弃原生popover属性，自定义弹出层（受Flex父元素控制） #

如果一定要用Flex父元素来控制位置，需要自己实现popover的显示/隐藏逻辑，避免使用原生popover属性，让元素留在原DOM层级中：

CSS代码 #

#popoverparent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: flex-end;
  margin: 0; /* 去掉默认body边距 */
}

#mypopover {
  display: none; /* 默认隐藏 */
  padding: 1rem;
  background: white;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

#mypopover.show {
  display: block; /* 显示时切换类 */
}

HTML代码 #

<div id="popoverparent">
  <button onclick="document.getElementById('mypopover').classList.toggle('show')">
    打开弹出层
  </button>
  <div id="mypopover">
    <p>Some text.</p>
    <p><button onclick="document.getElementById('mypopover').classList.remove('show')">Close</button></p>
  </div>
</div>

方案2：保留原生popover，用固定定位直接定位到底部 #

如果想继续使用原生popover的便捷特性（比如自动顶层上下文、内置关闭逻辑），可以直接给popover设置固定定位，不需要依赖Flex父元素：

CSS代码 #

#mypopover {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 1rem;
  background: white;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

HTML代码 #

<button popovertarget="mypopover" popovertargetaction="toggle">
  弹出层切换
</button>
<div id="mypopover" popover="manual">
  <p>Some text.</p>
  <p><button popovertarget="mypopover" popovertargetaction="toggle">Close</button></p>
</div>

补充说明 #

原生popover的顶层上下文特性是为了避免被其他元素遮挡，如果你一定要让它受父元素布局影响，只能放弃原生属性，自己控制元素的显示状态和位置。

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