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

嗯，其实我觉得有点笨。我回到我的代码，我注意到 .dropdown 元素上的 overflow: hidden。我删除了它并解决了问题。

Answer 2

从 .dropdown 中删除 overflow: hidden 就可以了！

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>

z-index 不适用于嵌套的绝对元素

z-index does not work with nested absolute elements

html

javascript

css

z-index

css-position