CSS如何让元素子元素显示在同级元素上方（保留父级z-index）

这是CSS层叠上下文的标准渲染行为：

• 两个.child元素同时设置了position: relative和数值型z-index: 10，会各自生成独立的层叠上下文，二者同属于父元素.parent的层叠上下文范围内。
• 同一层叠上下文下，z-index值相等的定位元素按DOM流顺序堆叠，位置靠后的元素会覆盖靠前的元素。
• 子元素的z-index仅能在自身所属的父层叠上下文内部生效，无法突破父层叠上下文的层级限制。即便给.child-hover设置z-index: 9999 !important，它也只能在第一个.child的层叠范围内处于最高层级，无法越过父级的层级限制，盖过同层级下DOM顺序更靠后的第二个.child。

不需要移除.child类上已配置的z-index属性，只需要提升第一个.child的层叠上下文等级，让它高于第二个.child即可。
直接给第一个.child单独配置更高的z-index值，修改后的完整CSS如下：

.parent {
  border: 5px dotted red;
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 50px;
  background-color: black;
}

.child {
  border: 5px solid blue;
  height: 100px;
  width: 100px;
  margin: 0 0 50px 50px;
  background-color: midnightblue;
  position: relative;
  z-index: 10;
}

/* 提升第一个子容器的层叠等级 */
.child:first-child {
  z-index: 11;
}

.child-hover {
  position: absolute;
  border: 3px solid green;
  border-radius: 40px;
  height: 60px;
  width: 80px;
  top: 0;
  left: 90%;
  background-color: green;
  z-index: 9999 !important;
}

原有HTML结构无需调整：

<div class="parent">
  <div class="child">
    <div class="child-hover"></div>
  </div>
  <div class="child"></div>
</div>

修改后第一个.child的层叠优先级高于第二个.child，其内部的绿色遮罩块自然会显示在第二个蓝色方块上方。

备选方案：如果不方便提升第一个.child的z-index，也可以给第二个.child设置低于10的z-index值（比如z-index: 9），核心逻辑就是保证包含遮罩的父容器层叠等级高于同级其他兄弟元素。

内容的提问来源于stack exchange，提问作者S V