Question

我有 2 个兄弟姐妹 div pagCon 和 cardCon。 cardCon 是一个大 div，它有框阴影属性，pagCon 在它上面，它是一个小 div，我希望它是白色的。一切正常，但由于 cardCon 的方框阴影，pagCon 的颜色较深。我可以以某种方式保留框阴影但消除对 pagCon 的任何影响吗？


.paginationContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid orange;
}

.projectCardContainer {
  margin: 5rem;
  width: 100rem;
  height: 30rem;
  background: #fff;
  box-shadow: 1px 1px 50px 5px #aaa;
  display: grid;
  grid-template-columns: 1fr 30rem;
  grid-template-rows: 1fr 1fr 1fr;
}

Answer 1

是的，你可以！只需将 position: relative 添加到 pagCon。
如果它仍然不起作用，请尝试添加 z-index: 1。

示例如下：

.paginationContainer {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid green;
  position: relative;
}

.projectCardContainer {
  margin: 1rem 2rem;
  width: 100rem;
  height: 30rem;
  background: #fff;
  box-shadow: 1px 1px 50px 5px red;
  display: grid;
  grid-template-columns: 1fr 30rem;
  grid-template-rows: 1fr 1fr 1fr;
}

<div class="paginationContainer"></div>
<div class="projectCardContainer"></div>

CSS 可以保护 div 免受来自其他 div 的框阴影的影响吗？

1 个答案: