如何将阴影推到兄弟姐妹的背面 div

Question

我正试图将兄弟 div 的影子推到 div 的后面。我解决了与此相关的其他问题，但其中 none 对我有用。

我尝试添加 position 和 z-index，但到目前为止没有成功。这是我正在使用的 CSS：

#example1 {
  padding: 10px;
  box-shadow: 5px 12px 15px #888888;
  margin-bottom: 5px;
  position:relative;
  z-index: 1000;
}

HTML:

<div id="example1">
  <p>The optional third value adds a blur effect to the shadow.</p>
</div>

<div id="example1" >
  <p>More blurred.</p>
</div>

<div id="example1">
  <p>More blurred and red.</p>
</div>

影子应该在兄弟 div 的后面，但它落在兄弟 div 的上面。

Here 是活生生的例子。

Answer 1

首先，不要在多个元素上使用相同的 ID。

其次，给你的div一个background-color.

就是这样。

.example {
  padding: 10px;
  box-shadow: 5px 12px 15px #888888;
  margin-bottom: 5px;
  position: relative;
  background-color: white;
}

<div id="example1" class="example">
  <p>The optional third value adds a blur effect to the shadow.</p>
</div>

<div id="example2" class="example">
  <p>More blurred.</p>
</div>

<div id="example3" class="example">
  <p>More blurred and red.</p>
</div>

Answer 2

这是否解决了您的问题？

.example {
  padding: 10px;
  box-shadow: 5px 12px 15px #888888;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  background: white;
}


/**
.example1 {
  z-index: 1;
}

.example2 {
  z-index: 2;
}

.example3 {
  z-index: 3;
}
**/

<div class="example example1">
  <p>The optional third value adds a blur effect to the shadow.</p>
</div>

<div class="example example2">
  <p>More blurred.</p>
</div>

<div class="example example3">
  <p>More blurred and red.</p>
</div>

Answer 3

我看到有些在我之前，但要仅将第二个 div op 放在顶部，请确保仅在 div:

上设置背景颜色

.example1 {
  padding: 10px;
  margin-bottom: 5px;
  position: relative;
}

.example1::before {
  box-shadow: 5px 12px 15px #888888;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.pushtop {
  background: white;
}

参见 jsfiddle：https://jsfiddle.net/sanderdebr/kj1b7mgv/16/

如何将阴影推到兄弟姐妹的背面 div

How to push a shadow to the backside of a sibling div

html

css

box-shadow