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.

Chewink

remember to close your div at #inner. And for the question: Set the z-index to a negative value, then it will be underneath. – Classroom

My mistake on the inner div. Fixed. – Chewink

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

Renick

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.

Generality

A good solution. But it should be mentioned that this only works with #outer class having a transparent background. – Wolves

@Flixer, very good catch. It wasn't working on my actual site, and it's because the parent element has a background color. Should have made the example more representative, but I didn't know background color mattered on the parent. So I agree -- this answer works for transparent backgrounds, but not for non-transparent. – Chewink

But the answer should work for you anyways. Simply add another child element to the #outer element and apply the background color to it. The z-Index of this element should have a greater negative value (e.g. -11) – Wolves

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/

Friederike