如何在其他 div 上显示下拉菜单？答案

【问题标题】：How to display drop-down over other divs?如何在其他 div 上显示下拉菜单？
【发布时间】：2017-07-23 17:17:37
【问题描述】：

所以我有一个表格，我通过更改 css 中可滚动的表格使其水平滚动。

但是，下拉菜单开始以可滚动方式在表格末尾附近被截断。所以下拉菜单在技术上是可见的，但是您必须将光标放在下拉菜单附近并尝试向下滚动以查看下拉菜单的其余部分。我试图让overflow-y hidden 禁用垂直滚动，但这并没有使下拉菜单越过其他div。当然还有 z-indexes..

所以在代码 sn-p 之前它看起来像这样（因为你可以选项按钮被切断）：

        $('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'overflow-x' : 'auto'});
        $('.dropdown-toggle').css({'z-index' : 9999});
        $('.dropdown-menu').css({'z-index' : 9999});
        $('.li').css({'z-index' : 9999});

在代码之后，它看起来像这样：

如何让表格既可以水平滚动，又让下拉菜单像以前一样可见？那么下拉菜单会覆盖页码吗？

【问题讨论】：

请附上一个独立的例子来说明问题。
在这一行添加position:absolute$('.dropdown-menu').css({'position' : absolute});
@neophyte 这是一个模糊的假设，因为我们对代码结构一无所知。如果之前没有定位，这可能会破坏下拉列表，如果有，它不会改变任何东西，
谢谢！这只是一个假设，因为他没有提供任何代码..再次感谢。
@Christoph 抱歉，我不确定与这个问题有什么关系，因为很多代码都是由其他人编写的。而且我显然不能发布这么多不必要的代码，所以如果你能指出什么是相关的，这将对我有所帮助。（CSS，html，js，php等）无论如何，下拉列表过去都是可见的，现在我必须在同一个 div 中向下滚动才能看到它。

标签： jquery css drop-down-menu html-table

【解决方案1】：

将您的下拉菜单设置为fixed 位置，替换您的代码：

$('.dropdown-menu').css({'z-index' : 9999});

到：

$('.dropdown-menu').css({'position' : 'fixed', 'z-index' : 9999});

但是位置固定会有其他问题...

或而不是固定位置让你的table-scrollable具有固定的高度，所以它总是可以允许下拉以适应它的高度而不隐藏它，改变：

$('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'overflow-x' : 'auto'});

到：

$('.table-scrollable').css({'display' : 'inline-block', 'width' : '100%', 'min-height': '200px', 'overflow-x' : 'auto'});

（我猜你的问题是overflow，当你的表中没有数据时）

【讨论】：

感谢您的帮助。但是，通过这种方式，下拉菜单以同样的方式在同一个 div 中溢出，因此您必须在 div 中向下滚动才能看到下拉菜单，而不是出现在下面的 div 上。它曾经在其他 div 上显示下拉菜单，现在如果您不在同一个 div 中滚动，它就会隐藏起来。
然后尝试固定位置，我写的第一个方法。
我尝试将其更改为固定和绝对，但仍然相同。我仍然需要在表格的 div 中向下滚动才能看到下拉菜单。我看到你用 min-height:200 做了什么，当只有一行时它会使表格变大一点，它可以解决只有一行时的问题。但是表格高度是不确定的，因为可能有不同的行数，所以 min-height 很容易小于实际高度，所以如果这有意义的话，它不会有任何影响。
好吧，位置fixed 或absolute 应该可以工作，尝试为这些指定更高的z-index，例如999999 .dropdown-menu...
好吧，问题不在于 z-index。无论如何向下滚动都可以看到。但是如果你不向下滚动它就会被切断。无需向下滚动：imgur.com/a/s5gyD 并在向下滚动后：imgur.com/a/jtQw2 我还尝试将 oveflow-y 设置为隐藏、可见等，但下拉菜单要么被完全切断，所以我永远看不到它，或者我必须向下滚动在表格 div 中查看。