css - “翻译”框的框阴影落在同级框上

框的框阴影落在同级框上。我可以使用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>

最佳答案

在父级上使用转换时，您将创建一个新的stacking context，它将转换后的.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>

关于css - “翻译”框的框阴影落在同级框上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52819398/