Moabubaker
New Member
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 \[code\]position\[/code\] 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:\[code\]<div id="window"> <div id="wall"> <div class="box" /><div class="box" /> .... many boxes </div></div><div id="overlay" />\[/code\]CSS:\[code\]#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;}\[/code\]Overlay dimensions are set via jQuery upon a certain event:\[code\] $('<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');\[/code\]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/