Jquery 多重引导选择：z索引问题

我正在使用插件进行一些选择。问题是第一次选择显示的下拉列表位于切换第二次选择的按钮后面。查看它（最后是jsfiddle）：

这是HTML：

<div class="input-group">
    <input id="min-value-input" type="text" class="form-control">
    <div class="input-group-btn">
        <select class="select-time-unit">
            <option value="m" selected>minutes</option>
            <option value="h">hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
        </select>
    </div>
</div>
<div class="input-group">
    <input id="max-value-input" type="text" class="form-control">
    <div class="input-group-btn">
        <select class="select-time-unit">
            <option value="m" selected>minutes</option>
            <option value="h">hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
        </select>
    </div>
</div>

该插件生成一个引导下拉菜单。我曾尝试为生成的HTML的

li

元素增加

z-index

属性，以及为按钮本身减少属性，但都不起作用

---

这里是一个你可以自己看到的地方。

只需在父元素

中添加一个

z-index

，影响子元素将不起作用，因为堆叠顺序只会与父元素一样高。您只需要在第一个

.input组的父元素上设置更高的z索引


$（函数（）{
$（'.select time unit'）。选择器（）；
})
.input-group.first{
z指数：1000；
}

分钟
小时
天
周
分钟
小时
天
周
这似乎是所述插件中的一个bug

最干净的修复方法（以及对我有效的方法）似乎如下所示

.input-group .bootstrap-select.form-control {
        z-index: inherit;
}

这样地？哈哈，是的，这很有效，能解释一下原因吗？为什么降低按钮的z索引或增加li索引都不能做到这一点？@dabadaba z索引对定位的元素和同级元素起作用，因此在代码中，要使顶部选择优于底部选择，您需要上升到顶部和底部元素是同级元素的级别（在本例中为输入组divs）并确保它们位于顶部输入组，其z指数高于较低输入组group@dabadaba我将把它作为一个答案提交，并解释顶部
输入组
的z指数高于底部，这意味着底部
输入组
周围的“选定”发光在顶部被切断。我不知道如何在下拉列表仍然可见的情况下修复它。@AndyJ你在哪里看到的？我在chrome和firefox中看到它，在我看来还不错。这很微妙，因为阴影不是很大，但你可以在这张图片中看到，光晕延伸到右边的单元格，好的，但不是上面的单元格。如果你聚焦顶部单元格，你可以看到阴影向下延伸到底部单元格。你能在源中反转顺序吗？好建议！我使用的是bootstrap4，它在悬停时添加了一个z索引。但我应该能够覆盖它，这样就不会使用z索引，然后使用flex颠倒顺序，最终一切都会顺利进行。
.input-group .bootstrap-select.form-control {
        z-index: inherit;
}