Any weird z-index rules I should know about?

Question

Sorry, I can't post the full code, I'm working on proprietary things. Basically, I have a problem when a DIV that has a z-index of 6 is blocked by an overlay DIV that has a z-index of 5. Is there any script that would do this? I am trying to understand why this is happening. It just doesn't make any sense. Anything related to embedding DIVs or CSS position maybe?

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

Composition:

 <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 sizes are set via jQuery on a specific 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'); 

Despite the fact that one of the boxes has a z-index of 6, and the overlay is 5, the overlay is still above the specified field.

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

Why the hell does this JSFiddle work, but my actual code doesn't ?! http://jsfiddle.net/csaltyj/2gzTc/

Answer 1

z-index only works with position: relative , absolute or fixed elements. They seem to travel a lot.

In addition, a child can never be lower than its parent. This example , also on Jsfiddle, illustrates this.

Based on your example, it turns out that you have a problem:

z-index refers only to its parent object, which in most cases is the document itself. If the z-index one brother is lower than the other, nothing you change about the first twin children can move him above his siblings. Learn more about the stacking context if you're interested.

Here's a visual:

Crossed out in red is what you want to do, and this is not possible with CSS (given that these small boxes are larger child blocks with markup that 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> 

The solution would be to move the “overlay” inside the wall, or even better, use a pseudo-element (which appears as a child of the element to which it is applied), since the overlay sounds like something presentational, and thus should remain in the CSS area if the overlay div does not add semantic meaning.