3D transform变换z-index层级渲染异常

3D transform变换z-index层级渲染异常

问题描述
上下两个动画，但是层级混乱了，下边的定位元素层级比上面高

解决方法1：

<div class="box">
  <div class="parent1">
    <div class="text-ab">
      <div class="children-re">父元素1的被定为</div>
      <div class="children-ab">父元素1的定位元素父元素1的定位元素父元素1的定位元素父元素1的定位元素父元素1的定位元素父元素1的定位元素父元素1的定位元素</div>
    </div>
  </div>
  <div class="parent2">
    <div class="children-img">
      <img class="top-image" src="@/assets/portal/dh.png" fit="cover" alt="">
      <div class="img-ab">
        <img class="ab-image" src="@/assets/portal/qrCode1.png" fit="cover" alt="">
      </div>
    </div>
  </div>
</div>
<style>
.box {
  width: 100%;
  height: 400px;
  border: solid 1px #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform-style:preserve-3d;
}
.parent1 {
  width: 600px;
  height: 200px;
  border: solid 1px #c72424;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-ab {
position: relative;
transition: all 0.3s;
transform-style:preserve-3d;
}
.text-ab:hover {
  transform: translate3d(0px, -3px, 10px);
}
.text-ab:hover .children-ab {
  display: block;
}
.children-re {
  width: 100px;
  height: 50px;
  background-color: #ccc;
}
.children-ab {
  display: none;
  position: absolute;
  top: 100px;
  left: 0px;
  z-index: 10;
  width: 100px;
  height: 200px;
  background-color: #cccccc;
}
.parent2 {
  width: 600px;
  height: 200px;
  border: solid 1px rgb(20, 3, 245);
  display: flex;
  justify-content: center;
  align-items: center;
}
.children-img {
  position: relative;
  transform-style:preserve-3d;
}
.children-img:hover {
  transform: translate3d(0, 0, 5px);
}

.children-img:hover .img-ab {
  opacity: 1;
}
.top-image {
  width: 50px;
  height: 50px;
  transform: translateZ(0);
}
.img-ab {
  position: absolute;
  top: -100px;
  left: 0px;
  z-index: 2;
  opacity: 0;
  transform: translate3d(-50%, 0px, 5px);
  transition: opacity 0.2s;
}
.ab-image {
  width: 100px;
  height: 100px;
}
</style>

解决方法2：


参考文献：
https://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/
https://www.cnblogs.com/reaf/p/5788781.html