CSS:z-index 不能在位置内工作:相对容器

Question

我想将 .wall-panel div 放在我的 img 后面(以便图像可见)，但保留所有 fiddle 中的另一个定位。这在没有 position: relative 容器的情况下也有效，但是一旦进入容器，z-index 属性似乎什么都不做。

我做错了什么？

.container {
  position: relative;
  top: calc(100vh * 0.4);
  left: 0;
  width: 100%;
}

.image {
  z-index: 1;
}

.wall-panel {
  width: 100%;
  background-color: red;
  height: 200px;
  position: absolute;
  top: 0;
  z-index: 0;
}

<div class='container'>
  <img class='image' src='http://lorempixel.com/400/400/'>
  <div class='wall-panel' />
</div>
<div>
Some other text that positions under the container.
</div>

Answer 1

z-index 应该是 -1 这应该有效:

.container {
  position: relative;
  top: calc(100vh * 0.4);
  left: 0;
  width: 100%;
}

.image {
  z-index: 1;
}

.wall-panel {
  width: 100%;
  background-color: red;
  height: 200px;
  position: absolute;
  top: 0;
  z-index: -1;
}

<div class='container'>
  <img class='image' src='http://lorempixel.com/400/400/'>
  <div class='wall-panel'>
</div>
<div>
Some other text that positions under the container.
</div>
</div>