为什么 child 元素在使用 z-index -1 时会落后于容器

Question

我在容器内工作，我制作了另外 2 个元素 parent 和 child。当我使用 z-index: -1 使 child 元素成为绝对元素时，child 位于容器后面。我想要的是让它落后于 parent.

Js Fiddle Example

<div class="container">
  Container<br><br>
  <div class="paremt">
    Parent position relative
    <div class="child">
      Parent child
      Position Absolute index -1
    </div>
  </div>
</div>

* {
  color: #fff;
  font-size: 20px;
}
.container{
  background-color: pink;
  width: 100%;
  height: 150px;
}
.paremt{
  position: relative;
  background-color: red;
  height: 80px;
}
.child{
  position: absolute;
  top: 0;
  left: -20px;
  z-index: -1;
  background-color: blue;
  width: 400px;
  height: 200px;
  line-height: 250px;
}

Answer 1

添加你的 parent

z-index: 1;

Answer 2

您只需添加

z-index: 0;

到父元素。它应该可以解决您的问题。