【CSS】【z-index】如何实现两个子组件在对方父组件之上

在CSS中，z-index属性主要用于控制重叠元素的堆叠顺序。z-index值大的元素将位于值小的元素之上。但是要注意，z-index只能在定位元素上生效，也就是说，元素必须是relative、absolute、fixed或sticky定位。

如果你想要实现两个子元素在它们各自父元素的上方，你可以设置每个子元素的z-index值大于它们对应父元素的z-index值。

假设父元素的z-index是0，子元素1和子元素2的z-index分别设置为1和2，则子元素2将覆盖子元素1。

示例代码：

<div class="parent1">
  <div class="child1">子元素1</div>
</div>
<div class="parent2">
  <div class="child2">子元素2</div>
</div>

.parent1, .parent2 {
  position: relative; /* 定位属性 */
  z-index: 0; /* 父元素的z-index */
}
 
.child1, .child2 {
  position: absolute; /* 定位属性 */
}
 
.child1 {
  z-index: 1; /* 子元素1的z-index */
}
 
.child2 {
  z-index: 2; /* 子元素2的z-index */
}

在这个例子中，.child2将覆盖.child1，因为.child2的z-index值更大。