css - 如何使下拉菜单正确显示在具有水平滚动条的容器之外

Question

我有一个下拉列表，我想在具有水平滚动条的容器之外正确显示。它目前被“埋”在容器内。

见演示：https ://codepen.io/lzhoucs/pen/EdYgXr

容器有以下硬性限制：

width: 300px;
overflow-x: auto;

我唯一的要求是该解决方案应与水平滚动条一起使用，最好不要使用 javascript。

• 请参阅尝试 1：https ://codepen.io/lzhoucs/pen/KGPNpb 。当我们不滚动时，这个版本有点工作。我们一滚动它就会发出喙。

• 参见尝试 2：https ://codepen.io/lzhoucs/pen/KGPNaE 。这个版本完全打破了滚动条

标签： cssdrop-down-menucss-position

Answer 1

这篇文章对这个问题有很好的解释并提供了一种解决方法，尽管它仍然需要 JS 来正确定位子菜单：https ://css-tricks.com/popping-hidden-overflow/

position:relative但在您的情况下，只需从.dropdown- https://codepen.io/anon/pen/KGPWEx中删除似乎就足够了

这是因为即使是绝对定位的元素也只是假设它们在正常流程中的位置，当“坐标”（上、左、...）没有明确指定时，它们的初始默认值为auto.

（但这不起作用，如果定位树更靠前的任何祖先元素 - 就像您在示例中添加position:relativefor一样.container，它会再次中断。在这种情况下，我认为您可能必须选择“完整” 上述文章中概述的解决方法。）