html - 可能有一个 child 的z索引高于其父z索引

This question already has answers here:

How to make child element higher z-index than parent? [duplicate]
                                
                                    （6个答案）
                                
                        
                                2年前关闭。
            
                    
代码提取：

<div class="parent">
    <div class="child">

    </div>
</div>

<div class="other">

</div>

我想做的是让其他类在父级以上但在子级以下进行渲染吗？

最佳答案

.parent {
  width: 300px;
  height: 300px;
  background-color: #F4F4F4;
}

.child {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 4px solid #000;
  opacity: .9;

  position: relative;
  z-index: 2;
}

.other {
  width: 150px;
  height: 150px;
  background-color: green;
  border: 4px solid #000;
  opacity: .9;

  position: absolute;
  top: 150px;
  z-index: 1;
}

<div class="parent">
    <div class="child">

    </div>
</div>

<div class="other"></div>