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

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。此版本完全破坏了滚动条

Answer 1

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

但是对于您而言，仅从position:relative-https://codepen.io/anon/pen/KGPWEx

中删除.dropdown就足够了

这是由于以下事实：当未明确指定“坐标”（顶部，左侧，...），而是将其保留在其初始位置时，即使绝对定位的元素也将假设其在正常流程中的位置。默认为auto。

（但是，如果将树的上祖元素的 any 放置在树上，则此操作将无效-就像在示例中为position:relative添加.container一样，在这种情况下，我认为您可能必须采取上述文章中概述的“完整”解决方法。）