z 索引为 -1 的元素位于祖父母的 div 下

Question

将z-index:-1放入绝对儿童中，使Div在祖父母下。我如何使绝对孩子在父母div下而不是祖父母div？

.grandparent{
  background:rgba(0, 128, 0, 0.89);
  width:500px;
}
.parent{
  position:relative;
  width:200px;
  height:200px;
  background:yellow;
}
.absolute-child{
  position:absolute;
  width:100px;
  height:100px;
  background:red;
  top:10px;
  right:-50px;
  z-index:-1;
}

 <div class="grandparent">
    <div class="parent">
      <div class="absolute-child"> absolute ch
      </div>
      <div class="siblings">siblings</div>
    </div>
 </div

Answer 1

这是您想要的，将position: relative;添加到Granparent中，因此z-index: 0;适用于此。

.grandparent{
  background:rgba(0, 128, 0, 0.89);
  width:500px;
      z-index: 0;
    position: relative;
}
.parent{
  position:relative;
  width:200px;
  height:200px;
  background:yellow;
}
.absolute-child{
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    top: 10px;
    right: -50px;
    z-index: -1;
}

<div class="grandparent">
    <div class="parent">
      <div class="absolute-child"> absolute ch
      </div>
      <div class="siblings">siblings</div>
    </div>
 </div