html - 如何使子元素高于子元素z-index？

Question

所有元素都应该是绝对位置！

需要实现的是元素“child1”（z-index：3；）在“child2”（z-index：2）之上，两者都应该在父div中（z-index：1；）。

如何使这成为可能？

代码：

  #parent {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1;
}

#child1 {
  width: 150px;
  height: 150px;
  background: red;
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 3;
}

#child2 {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  top: -30px;
  left: -30px;
  z-index: 2;

<div id="parent">
  <div id="child1">
    <div id="child2"></div>
  </div>
</div>

标签： htmlcsscss-positionparent-childz-index