htmlcssbox-shadow

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

I am trying to push the shadow of the sibling div to the back of the div. I went through the other questions related to this, but none of them worked for me.

I tried adding position and z-index but no luck so far. Here is the CSS I am using:

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

The shadow should be behind the sibling div, but it is falling on top of the sibling div.

Here is the live example.

Shadows on top of sibling divs

Solution

  • I see some were before me, but to only place the second div op top make sure to only set the background color on that 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;
}

    See jsfiddle: https://jsfiddle.net/sanderdebr/kj1b7mgv/16/