[英]z-index does not work with nested absolute elements
I am trying to develop a dropdown which contains a ul
list that is expandable. 我正在尝试开发一个包含可扩展的
ul
列表的下拉列表。 An element of the list is visible by default. 默认情况下,列表的元素是可见的。 When the list is expanded, all the elements should be visible and it should be positioned over the dropdown.
列表展开后,所有元素都应该可见,并且应该位于下拉列表上方。 I attached the snippet and as you can see, the list expands but the
li
elements are not over the dropdown, even though the ul
has an absolute position and a greater z-index
. 我附上了代码段,如您所见,列表扩展了,但
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>
Someone knows how to help on this? 有人知道如何提供帮助吗? Thanks!
谢谢!
Remove overflow: hidden
from .dropdown
and there you go! 清除
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>
Well, I actually feel a bit dumb. 好吧,我实际上有点傻。 I came back to my code and I noticed the
overflow: hidden
on the .dropdown
element. 回到代码后,我注意到了
overflow: hidden
在.dropdown
元素上。 I removed it and it fixed the issue. 我删除了它,并解决了该问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.