多引導選擇：z-index問題

我使用bootstrap-select插件進行了一些選擇。問題是第一個選擇顯示的下拉列表位於切換第二個選擇的按鈕後面。檢查出來（在年底的jsfiddle）：多引導選擇：z-index問題

這是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你可以看到自己。

來源

2017-02-21 dabadaba

這樣嗎？ https://jsfiddle.net/3oc6baoh/1/ –

大聲笑是啊，工作，謹慎解釋爲什麼？以及爲什麼降低按鈕的Z-索引或增加LI沒有做到這一點？ – dabadaba

@dabadaba z-indexes對定位的元素和兄弟元素起作用，所以在你的代碼中，爲了讓頂部選擇超過下面的select，你需要達到頂部和底部元素是兄弟（在這種情況下，輸入組div），並確保它們的頂部輸入組具有比較低的輸入組具有更高的Z指數 – Pete

影響孩子將無法正常工作，因爲層疊順序只會去高達父元素（一個或多個）。您只需要在第一個.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>

來源

2017-02-21 16:19:50

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

來源

2017-02-21 16:03:19 Centurio

多引導選擇：z-index問題

回答

相關問題