"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

当您在父级上使用翻译时，您创建了一个新的 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>

"translated" 框的框阴影落在兄弟框上

Box shadow of "translated" box falls on sibling box

css

box-shadow