z-index不適用於嵌套的絕對元素

Question

我想開發一個包含可擴展的ul列表的下拉列表。列表中的一個元素默認是可見的。列表展開時，所有元素都應該可見，並且應該位於下拉列表中。我附上了代碼片段，正如您所看到的，列表會展開，但li元素未超過下拉列表，即使ul具有絕對位置並且具有更大z-index。

var dropdown = false; 
 
var list = false; 
 

 
function toggleList() { 
 
    toggle('.hidden', list); 
 
    list = !list; 
 
} 
 

 
function toggleDropdown() { 
 
    toggle('.dropdown', dropdown); 
 
    dropdown = !dropdown; 
 
} 
 

 
function toggle (selector, isAlreadyOpened) { 
 
    if(isAlreadyOpened) $(selector).hide(); 
 
    else $(selector).show(); 
 
}

.parent { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
.dropdown { 
 
    width: 40%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
} 
 

 
.list { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button onclick="toggleDropdown()">Toggle dropdown</button> 
 
    
 
    <div class="dropdown"> 
 
    First Dropdown 
 
    
 
    <button onclick="toggleList()">Toggle list</button> 
 
    <ul class="list"> 
 
     <li>1st element</li> 
 
     <li class="hidden">2nd element</li> 
 
     <li class="hidden">3rd element</li> 
 
     <li class="hidden">4th element</li> 
 
     <li class="hidden">5th element</li> 
 
     <li class="hidden">6th element</li> 
 
    </ul> 
 
    </div> 
 
</div>

有人知道如何幫助這個？ 謝謝！

Answer 1

刪除overflow: hidden從.dropdown你去了！

var dropdown = false; 
 
var list = false; 
 

 
function toggleList() { 
 
    toggle('.hidden', list); 
 
    list = !list; 
 
} 
 

 
function toggleDropdown() { 
 
    toggle('.dropdown', dropdown); 
 
    dropdown = !dropdown; 
 
} 
 

 
function toggle (selector, isAlreadyOpened) { 
 
    if(isAlreadyOpened) $(selector).hide(); 
 
    else $(selector).show(); 
 
}

.parent { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
.dropdown { 
 
    width: 40%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 10; 
 
} 
 

 
.list { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button onclick="toggleDropdown()">Toggle dropdown</button> 
 
    
 
    <div class="dropdown"> 
 
    First Dropdown 
 
    
 
    <button onclick="toggleList()">Toggle list</button> 
 
    <ul class="list"> 
 
     <li>1st element</li> 
 
     <li class="hidden">2nd element</li> 
 
     <li class="hidden">3rd element</li> 
 
     <li class="hidden">4th element</li> 
 
     <li class="hidden">5th element</li> 
 
     <li class="hidden">6th element</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

嗯，我其實覺得有點愚蠢。我回到我的代碼，我注意到.dropdown元素上的overflow: hidden。我刪除它，它解決了這個問題。