多个引导选择：z-index 问题答案

【问题标题】：Mutliple bootstrap-selects: z-index issue多个引导选择：z-index 问题
【发布时间】：2017-07-11 08:36:50
【问题描述】：

我正在使用bootstrap-select 插件进行几个选择。问题是为第一个选择显示的下拉列表位于切换第二个选择的按钮后面。看看（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>

当然我正在启用插件：

$(function() {
  $('.select-time-unit').selectpicker();
})

插件会生成一个引导下拉菜单。我尝试为生成的 HTML 的 li 元素增加 z-index 属性，并为按钮本身减少它，但这些都不起作用。

这是jsfiddle，您可以自己查看。

【问题讨论】：

这样？ jsfiddle.net/3oc6baoh/1
大声笑是的，这行得通，想解释一下为什么吗？为什么降低按钮的 z-index 或增加 li 没有做到这一点？
@dabadaba z-indexes 作用于定位的元素和同级元素，因此在您的代码中，要使顶部选择超过下部选择，您需要上升到顶部选择的级别和底部元素是兄弟元素（在本例中为输入组 div），并确保它们位于顶部输入组的位置，顶部输入组的 z-index 高于较低输入组
@dabadaba 我会将其作为答案提交并附上解释

标签： jquery css twitter-bootstrap select z-index

【解决方案1】：

这似乎是插件中的一个错误，如 here 所述。

最干净的修复（以及对我有用的）似乎如下。

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

【讨论】：

【解决方案2】：

影响子元素不起作用，因为堆叠顺序只会与父元素一样高。您只需要在第一个 .input-group 的父元素上设置更高的 z-index。 https://jsfiddle.net/3oc6baoh/1/

$(function() {
  $('.select-time-unit').selectpicker();
})

.input-group.first {
  z-index: 1000;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group first">
  <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>

【讨论】：

顶部input-group 的z-index 比底部高意味着底部input-group 周围的“选定”发光在顶部被切掉。我不知道如何解决这个问题，同时下拉菜单仍然可见。
@AndyJ 你在哪里看到的？我在 chrome 和 firefox 中查看它，我觉得它看起来不错。
它非常微妙，因为阴影不是很大，但是您可以在这张图片中看到，光晕延伸到右侧的单元格，但没有延伸到上方的单元格。 imagebin.ca/v/4EYF5P1b1k6U 如果您聚焦顶部单元格，您可以看到阴影向下延伸到底部单元格。
你能把源中的顺序倒过来吗？ jsfiddle.net/3oc6baoh/106
好建议！我正在使用引导程序 4，它在悬停时添加了一个 z-index。但我应该能够覆盖它，因此不使用 z-index，然后使用 flex 反转顺序，最终一切都很好。

【解决方案3】：

只需将z-index 添加到父<div class="input-group">

【讨论】：