Box-shadow of div over inner div - html

Question

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.

Answer 1

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>

Answer 2

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

Answer 3

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;
}
}