ネストされた絶対要素でz-indexが機能しない

Question

拡張可能なulリストを含むドロップダウンを開発しようとしています。リストの要素はデフォルトで表示されます。リストが展開されると、すべての要素が表示され、ドロップダウンの上に配置する必要があります。スニペットを添付して見ていただけるように、リストは拡大されますが、ulが絶対位置を持ち、より大きいz-indexであっても、li要素がドロップダウンを超えていません。

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

を.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に気付きました。私はそれを削除し、問題を修正しました。