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

jeerbl 发表于 Dev

jeerbl

我正在尝试开发一个包含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>

有人知道如何为此提供帮助吗？谢谢！

小羊羔

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>