jquery - 多个 Bootstrap 选择: z-index issue

Question

我正在使用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();
})

该插件生成一个 Bootstrap 下拉菜单。我尝试过提高生成的 HTML 的 li 元素的 z-index 属性，以及降低按钮本身的属性，但这些都不起作用。

这是一个jsfiddle您可以在其中亲眼目睹。

Answer 1

影响子元素是行不通的，因为堆叠顺序只会与父元素一样高。您只需在第一个 .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>