materializecss selectbox：选项不可选

Question

问题

我在一个带有position:absolute的容器中实现了一个selectbox。 在这个容器下面还有另一个容器（也是position:absolute）。容器具有相同的z-index。

当我想在选择框中选择某些内容时，与secound容器重叠的选项不可单击。 ：（

我尝试了什么

如果选择框的重点是这样，我尝试将z-index设置为更高的值：

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

此外，我试图将容器放置在相对的位置，这是有效的，但不幸的是，我无法在最终解决方案中这样做。

The jsFiddle

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

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

Answer 1

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

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

<强>更新

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

使用dropdwon list下面的输入更新了Fiddle。