Any weird rules about z-index I should know about?

Question

Sorry I can't post complete code, I'm working on proprietary stuff. Basically I have a problem where a DIV that has z-index 6 is being blocked by an overlay DIV that has a z-index of 5. Is there ANY scenario that would make this happen? I'm wracking my brain trying to figure out why this is happening. It just doesn't make any sense. Anything having to do with nesting DIVs, or CSS position maybe?

I apologize for the vagueness. I tried to recreate in JSFiddle but it works as expected, unfortunately. Only the actual code is wonky.

Structure:

<div id="window">
    <div id="wall">
        <div class="box" /><div class="box" /> .... many boxes
    </div>
</div>
<div id="overlay" />

CSS:

#window {
    position: relative;
    width: 960px;
    height: 700px;
    overflow: hidden;
    background: #666;
}

#wall {
    position: relative;
    width: 1640px;
    height: 1600px;
    -webkit-perspective: 2000;
}

#overlay {
    position: absolute;
    z-index: 5;
    background: #000;
}

.box {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 228px;
    height: 228px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    -webkit-transform-style: preserve-3d;
    z-index: 4;
    cursor: pointer;
}

Overlay dimensions are set via jQuery upon a certain event:

        $('<div id="overlay"></div>').css({
            'left': $('#window').position().left + 'px',
            'top': $('#window').position().top + 'px',
            'width': $('#window').width() + 'px',
            'height': $('#window').height() + 'px',
            'opacity': 0.8
        }).appendTo('body');

Even though one of the boxes has a z-index of 6, and the overlay is 5, the overlay is still over said box.

The overlay is supposed to go over the window, but let one of its boxes through.

Why the heck does this JSFiddle work but my actual code does not?! http://jsfiddle.net/csaltyj/2gzTc/

Answer 1

z-index only works on elements with position: relative,absolute, or fixed. That seems to trip many people up.

In addition, a child can never be below its parent. This example, also on Jsfiddle illustrates it.

Based on the example you added it's clear the trouble you're having:

z-index is only relative to its parent, which in most cases is the document itself. If the z-index of one sibling is lower than another, nothing you change about first sibling's children can move it above its parents sibling. Read more about stacking context if you're interested.

Here is a visual:

Crossed out in red is what you want to do, and it is not possible with CSS (considering those small boxes are children of the bigger box, with markup which might look like this:

<div class="one">
</div>
<div class="two">
     <div> I can never be above "one", if my parent "two" isn't. </div>
</div>

A solution would be to move the "overlay" inside the wall, or better yet use a pseudo element (which is rendered as a child of the element it is applied to), because the overlay sounds like it something presentational, and thus should remain in the domain of CSS if an overlay div would add no semantic meaning.