是什么阻止 z-index 对这些元素产生影响？

Question

使用以下代码，我希望 <li> 元素在切换时出现在按钮下方。我不明白为什么不是这种情况 - 有人可以解释一下吗？

$('#switch').on('click', function(){
    $(this).parent().toggleClass('open');
})

.container {
    display: block;
    height: 50px;
    width: 300px;
    z-index: 1;
}

#switch {
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
    z-index: 10;
}

ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-indent: 0;
    vertical-align: top;
    z-index: 1;
}

li {
    background: red;
    display: inline-block;
    height: 50px;
    margin: 0 0 0 10px;
    padding: 0;
    transform: translateX(-100%);
    width: 50px;
    z-index: 0;
}

.open li {
    transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container open">
    <button id="switch">Click</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Answer 1

将 z-index 与 position: absolute;、position: relative; 或 position: fixed 一起使用。

Answer 2

z-index作品需声明位置：

$('#switch').on('click', function() {
  $(this).parent().toggleClass('open');
})

.container {
  display: block;
  height: 50px;
  width: 300px;
  z-index: 1;
}
#switch {
  position: relative;
  display: inline-block;
  height: 50px;
  vertical-align: top;
  width: 50px;
  z-index: 10;
}
ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-indent: 0;
  vertical-align: top;
  z-index: 1;
}
li {
  position: relative;
  background: red;
  display: inline-block;
  height: 50px;
  margin: 0 0 0 10px;
  padding: 0;
  transform: translateX(-100%);
  width: 50px;
  z-index: 0;
}
.open li {
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container open">
  <button id="switch">Click</button>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

是什么阻止 z-index 对这些元素产生影响？

What's stopping z-index having an effect on these elements?

css

z-index