z-index: -1时，:before的 z-index:2不起作用。
如何将:before移动到框下方，同时保持框z-index:2。
.box{
background: lavender;
height: 200px;
width: 200px;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.box:before{
content: '';
width: 100%;
height: 100%;
border: 1px solid #000;
position: absolute;
right: -20px;
bottom: -20px;
z-index: -1;
}<div class="box">
</div>
.box {
background: lavender;
height: 200px;
width: 200px;
position: relative;
}
.box::before {
content: "";
display: block;
height: 100%;
width: 100%;
border: 1px solid #000;
position: absolute;
z-index: -1;
right: -20px;
bottom: -20px;
}
.main
{
content: "";
display: block;
width: 100%;
position: absolute;
right: 50;
transform : translate(50%,50%);
}<div class="main">
<div class="box">
</div>
</div>
我已经使用::before元素实现了，并将主要元素用作了position:relative;。
要使类.box的div位于页面中间，请根据需要在（.main）上方添加一个div。
问题具有transform属性，您需要relative个孩子的absolute父母
.box {
background: lavender;
height: 200px;
width: 200px;
position: relative;
/* left: 50%; */
/* transform: translateX(-50%); */
/* z-index: 2; */
margin: 0 auto;
}