"translated"盒子的盒子阴影落在兄弟姐妹盒子上

Question

框的框阴影落在同级框上。我可以使用z-index来修复它。但是，如果其中一个框被平移(例如，当鼠标悬停时向上移动一点(，阴影会再次落在同级上。如何解决这个问题？谢谢。

.container {
margin: 30px;
padding: 10px;
}
div.shadow {
height: 100px;
width: 100px;
background-color: #ff0;
float: left;
margin: 4px;
}
.shadow {
position: relative;
}
.shadow:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
box-shadow: 0px 10px 1000px #000;
}
.shadow:hover {
transform: translateY(-3px);
}
.shadow:hover::after {
box-shadow: 0px 20px 1500px #000;
}

<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>

Answer 1

在父级上使用翻译时，会创建一个新的堆叠上下文，将转换后的.shadow元素放在其同级元素的顶部。若要防止可以使用转换以外的其他属性(例如top: -3px(：

.container {
margin: 30px;
padding: 10px;
}
.shadow {
position: relative;
height: 100px;
width: 100px;
background-color: #ff0;
float: left;
margin: 4px;
}
.shadow::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
box-shadow: 0px 10px 1000px #000;
}
.shadow:hover {
top: -3px;
}
.shadow:hover::after {
box-shadow: 0px 20px 1500px #000;
}

<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>