html - 如何使用z-index依次显示三级div？

Question

html代码如下:

<div class="first common">
    i am the first div.
    <div class="second common">
        i am the second div.
        <div class="third common">
            i am the third div.
        </div>
    </div>
</div>

CSS:

.common {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 200px;
    height: 200px;
    color: #fff;
}
.first {
    background-color: #8EE5EE;
}
.second {
    background-color: #7A67EE;
}
.third {
    background-color: #0000AA;
}

结果如下

现在，如果可以的话，我想使用 z-index 将第一个 div 放在前面，第二个 div 放在中间，第三个 div 在后面(反向)。但我不知道该怎么做。

Answer 1

用那个 html 你不能。无论 z-index 是什么，作为另一个 div 的子元素的 div 都不会显示在它后面。像这样重组:

.outer {
  position: relative;
}

.common {
  position: absolute;
  width: 200px;
  height: 200px;
  color: #fff;
}

.first {
  background-color: #8EE5EE;
  left: 50px;
  top: 50px;
  z-index: 3;
}

.second {
  background-color: #7A67EE;
  left: 100px;
  top: 100px;
  z-index: 2;
}

.third {
  background-color: #0000AA;
  left: 150px;
  top: 150px;
  z-index: 1;
}

<div class="outer">
  <div class="first common"></div>
  <div class="second common"></div>
  <div class="third common"></div>
</div>