CSS: Place child element "underneath" parent element's inset box shadow?

Question

Please see this fiddle, or the code below:

http://jsfiddle.net/MegaMatt3/92G6X/9/

HTML:

<div id="outer">
    <div id="inner"></div>
</div>

CSS:

#outer {
    border: 1px solid black;
    box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;
    height: 200px;
    position: relative;
    width: 200px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

If I have a parent element, with an inset box shadow, and a child element inside it, the child element appears over top of the box shadow. I'd like for the child element to be "underneath" the box shadow, if possible. The effect would essentially show the inset box shadow on top of the child element.

I've messed with the z-index, but with no luck. Is this possible? Any help would be much appreciated. Thanks.

EDIT:

This question is kind of a mess now, but my original question should have indicated that I'm looking for a solution that works when the outer div has a non-transparent background. I've updated my original fiddle and code to reflect this scenario. The other answers here are valid, but the one I've marked as correct works for me in that scenario.

Answer 1

Another solution that works with non transparent backgrounds: Set the shadow on a pseudo element

CSS

#outer {
    border: 1px solid black;
    height: 200px;
    position: relative;
    width: 200px;
    background-color: white;
}

#outer:after {
    content: "";
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
}

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}

demo

Answer 2

Set #inner to a negative z-index.

#inner {
    background-color: #55A8FF;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -10;
}

http://jsfiddle.net/S8Sm7/

PS: Remember to close your tags :) just to be safe.

Answer 3

I would add another <div>.

You could use z-index, but if anything else is in the <div> you're going to have modify them all or do some other hack. I suggest adding another <div> with the shadow. This is a flexible solution.

<div id="outer">    
   <div id="inner"></div>
   <div id="newDiv"></div> // shadow moved to this div
</div>

I had a similar problem here css - box shadow covering all contained divs using absolute positioning

example here: http://jsfiddle.net/92G6X/8/