CODEWITHSUNDEEP
htmlcssbox-shadow
Rahul Gawale
Rahul Gawale

Reputation: 113

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

Upvotes: 0

Views: 260

Answers (3)

sanderdebr
sanderdebr

Reputation: 140

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/

Upvotes: 2

SpiritOfDragon
SpiritOfDragon

Reputation: 1432

Does this solve your issue?

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

Upvotes: 1

thingEvery
thingEvery

Reputation: 3434

First of all, don't use the same ID on more than one element.

Second, give your divs a background-color.

That's it.

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

Upvotes: 1

Related Questions