CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 5078

Box-shadow of div over inner div

I have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here.

My HTML is:

<div class="wrapper">

  <div class="inner">

  </div>

</div>

And CSS:

.wrapper {
  width: 200px;
  height: 100px;
  border: 1px grey solid;
  box-shadow: inset 40px 0 10px -10px #bbbbbb;
}

.inner{
  width: 180px;
  height: 80px;
  margin: 10px;
  background-color: lightblue;
}

Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.

Upvotes: 4

Views: 1174

Answers (3)

Derek Bess
Derek Bess

Reputation: 222

You can do what you are wanting without the inner container as well.

http://codepen.io/creativenauts/pen/rLWZqp

* {
  box-sizing: border-box;
}

.wrapper {
  width: 200px;
  height: 100px;
  border: 20px solid #fff;
  background-color: lightblue;
  box-shadow: 0px 0px 1px rgba(#000, 0.5);
  position: relative;
  &:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100px;
    top: -20px;
    left: -20px;
    box-shadow: inset 40px 0 10px -10px #bbbbbb;
  }
}

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

update the styles of inner class with position absolute and give z-index: -1;;

.inner {
  width: 180px;
  height: 80px;
  margin: 10px;
  background-color: lightblue;
  position:relative;
  z-index:-1;
}

Here is the updated jsFiddle

Upvotes: 1

j08691
j08691

Reputation: 207861

Set the position of the child to relative and the z-index to -1:

.wrapper {
  width: 200px;
  height: 100px;
  border: 1px grey solid;
  box-shadow: inset 40px 0 10px -10px #bbbbbb;
}

.inner {
  width: 180px;
  height: 80px;
  margin: 10px;
  background-color: lightblue;
  position:relative;
  z-index:-1;
}
<div class="wrapper">

  <div class="inner">

  </div>

</div>

Upvotes: 4

Related Questions