对于初学CSS的人来说，这是一个棘手的问题。问题是，如果这是在一个父div和两个级别相同的子div中完成的，也就是说，给中间的子div比另一个子div和父div更高的z-index就可以了。但是，在你有三个级别的场景中，你需要使用其他CSS属性，比如transform-style：保留-3D和变换：translateZ（Xpx），并给出一个数字而不是X。代码如下所示：

.level-0 {
  float:left;
  background-color:red;
  width:100px;
  height:100px;
  margin:10px;
  transform-style: preserve-3d;
}

.level-1 {   
  float:left;
  background-color:blue;
  width:100px;
  height:100px;
  margin:10px;
  transform-style: preserve-3d;
}
    
.level-2 {
  float:left;
  background-color:green;
  width:100px;
  height:100px;
  margin:10px;
  transform: translateZ(-10px);
}

<div class="level-0">
Level 0
  <div class="level-1">
  level 1
    <div class="level-2">
      level 2
    </div>
  </div>
</div>

如果你还需要什么帮助，尽管问我。

z索引仅适用于定位的元素。

• 在一个未定位的元素上设置z-index没有任何作用，z-index主要用于position:relative、position:absolute和position:fixed。
• 谈论您当前的结构parent、child和grand-child。

如果定位元素的z索引为X，则其所有子元素也将固定为z值X

• 上面的语句说，应用于当前根元素（level-0）的z-index也会应用于它的所有子元素，更改它的子元素z-index不会有任何效果。
• 有关详细信息，请参阅有关介质的文章。