z-indexs for position:fixed

I want to put a modal popup on my website. It's html is like this:

<div id="thePopup" class="popup" style="display:none;">
    <div class="popup-shadow">.</div>
    <h3>My Details</h3>
    <p>Message....</p>
</div>

Then I have css (well, actually SASS, which compiles to css.) like this:

.popup {
    z-index:10000;
    width:32em;
    position:absolute;
    left:20%;
    width:60%;

    .popup-shadow {
        position:fixed;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
        z-index:9000;

        background-color:#999999;
        /* I have yet to do it, but the shadow will be slightly transparent */
    }
}

There is a button that sets thePopup to display:block when the user clicks it. The popup is nested inside one of the content panels on my website. it is position:absolute so it appears above its parent panel when it is visible. I don't set thePopup to position:fixed as开发者_如何学JAVA it could be bigger than the height of the users screen, and I want them to be able to scroll up and down on it. However, I want to darken everywhere on the screen that isn't the popup - to indicate to the user that they need to interact with it.

This is where I run into problems - popup-shadow is being rendered infront of thePopup, despite it having a lower z-level. I don't know why this is. If I take away the popup-shadow div, thepopup appears on screen as expected. Does anyone have any idea why this is? Will a child div always be rendered on top of its parent, even if it has a lower z-index?

Use z-index:-1; instead of z-index:9000; for shadow div and z-index:1; instead of z-index:10000; for popup div

See Demo: http://jsfiddle.net/rathoreahsan/QfbUY/

I may be wrong, but it seems that the child elements of a div will always be rendered in front of the div, even if the div has a higher z-level. My solution was to put the popup-shadow div in a different location, and use a pair of javascript functions to ensure it was always made visible/hidden when popups were displayed and hidden.