父子孙三级div，如何使用z-index进行依次显示（父级最上，依次定位）？

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;
}

然后显示效果是这样的：

那么问题来了，现在我想让第一个div的层级最高，第三个在最下面，这样依次类推，可是我试过z-index加定位都无法实现这个效果，应该怎么写呢？找过很多答案，都是父子div之间的，像这样的3级或者更多层级的div相关的都没有提到。

Answer 1

我所了解的，父子之间只能通过负的z-index来让父元素高于子元素，负z-index的前提是父元素没有设置z-index，但是你这个嵌套有三层，第二层必定要设置负z-index，所以第三层就没办法了。

Answer 2

有层级关系之后，父元素是不可能比子元素还高的，一种办法就是不用嵌套的，三个元素并列，用绝对定位，同时按照你的需求设置他们的z-index
https://codepen.io/lixuejiang...

Answer 3

1.Z-INDEX常用于同级之间比较
<div>

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

</div>

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

</div>

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

</div>

这样的div结构设置z-index，轻松愉快愉快。

2.像父子关系的，父元素不设置z-index,设置子元素为负值，即可实现父元素在上的效果

<div class="first common">

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

</div>

Answer 4

父节点的z-index决定了子节点的现实层级，z-index解决不了你的问题，可以考虑放到同级下比较