z 索引 -1 的元素在祖父母的 div 下答案

【问题标题】：Element with z index -1 goes under grandparent's divz 索引 -1 的元素在祖父母的 div 下
【发布时间】：2018-03-15 11:50:50
【问题描述】：

将z-index:-1 放入absolute-child 中，使div 位于祖父母之下。如何让 absolute-child 进入父 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

【问题讨论】：

如果您觉得我的回答有帮助，请将其标记为检查（有帮助）
@AwsmeSandy 你能帮我解释一下吗？或者建议我写一篇文章让自己清楚。
如果你正在使用带有两个元素的 z-index，你也可以将 z-index 提供给父级，因此祖父级 z-index 充当子 div 的基础。
@AwsmeSandy 有什么文章可以了解有关 z-index 的一切吗？

标签： html css css-position z-index absolute

【解决方案1】：

这就是你想要的，将position: relative; 添加到祖父母，以便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

【讨论】：