遇到一个问题，一个是一个相对定位的div的after伪类，一个是一个普通div，要求普通div要在after伪类的z轴上方，z-index不起作用，但是给普通div一个transform: translateX(0px)属性之后，就实现了普通div在after伪类的z轴上方，后来查了一下，通过z-index控制z轴，需要配合position属性，且position的属性值为relative、absolute、fixed和sticky时。并且给z-index显式的设置数值，数值越大，其层级越高。简单点说，数值越高，元素越在顶上。所以transform: translateX(0px)可以给这个类加了一个position属性，然后我新建了一个html文件试了下，发现当有transform: translateX(0px)（或者其他改变div位置的值）属性的div的子div有position:absolute或者position:relative属性会相对 于有transform: translateX(0px)属性的父div，而这个父div其实并没有设置position属性。
不过这个父div的left，top等定位属性不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 500px;
height: 500px;
background-color: bisque;
padding: 100px;
}
.box2{
width: 300px;
height: 300px;
background-color: rgb(235, 138, 20);
transform: translateX(0);
left: 400px;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(17, 16, 16);
position: absolute;
left: 200px;
top: 300px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
</html>
捕获.PNG
