jquery - materializecss 选择框 : option not selectable

Question

问题

我在容器中有一个来自具体化的选择框，带有 position:absolute。在这个容器的正下方有另一个容器，里面有一些东西(也是 position:absolute)。容器具有相同的 z-index。

当我想在选择框中选择一些东西时，与第二个容器重叠的选项是不可点击的。 :(

我尝试了什么

如果选择框像这样聚焦，我尝试将 z-index 设置为更高的值:

$(".select-dropdown").on("focusin",function(){
    $(this).parents(".content-container").css("zIndex","100");
});

我还尝试使容器相对定位，这很有效，但不幸的是我无法在最终解决方案中这样做。

The jsFiddle

如果选择框位于绝对定位的容器中，如何使选择框的所有选项都可点击？

注意:我在这里重新询问 this question ，但有点简单，因为我能够删除 gridstack 部分并将其缩小到物化选择框。

Answer 1

解决方案非常简单，您只需删除 .content-container, .card 下的 z-index: 80 因为 div 具有相同的类 .content-container 这意味着相同的 z-index 并且这是错误的行为。也不需要 Javascript。

检查更新的 Fiddle ，希望这有帮助。

更新

只需为 div.one 添加 z-index 即可防止输入或其他元素覆盖下拉列表。

已更新 Fiddle在下拉列表下方输入。