如何将阴影投射到同级div的背面

Question

我正在尝试将同级div的阴影推到div的后面。我经历了与此相关的其他问题，但没有一个对我有用。

我尝试添加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

[我看到有些东西在我之前，但是要仅放置第二个div操作面板，请确保仅在该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/

Answer 2

首先，不要在多个元素上使用相同的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 3

这能解决您的问题吗？

.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>