Как вывести sh тень на заднюю часть родного брата

Question

Я пытаюсь положить sh тень родного 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.

Здесь - живой пример.

Answer 1

Решает ли это вашу проблему?

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

Я вижу, что некоторые из них были до меня, но чтобы разместить только второй div op top, убедитесь, что для этого 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 3

Во-первых, не используйте один и тот же идентификатор более чем для одного элемента.

Во-вторых, присвойте своим элементам 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>