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

好吧，我實際上有點傻。 回到代碼后，我注意到了overflow: hidden在.dropdown元素上。 我刪除了它，並解決了該問題。