I have two relative positioned DIVs A & B. a has a DIV as child element called A' which is absolute positioned and has a z-index of 1000. DIV B' is a child element of DIV B and positioned absolute as well.
Firefox renders this as expected: A'-B'-B-A(from nearest to farest from the user) However, in IE7 I get: B'-B-A'-A
Please can someone help me out with a workaround? I've already wasted hours with this problem!
Thanks in advance, Stephan
The issue is that in IE7 and earlier, it basically "resets" the z-index inside of relative positioned items.
If none of these work see 'The Last Resort' below
so in IE in this case the BAR would be above FOO in IE7's lame indexing method:
<div style="position:relative;">
<div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative;">
<div style="position:absolute; z-index:1;">BAR</div>
</div>
The workaround is equally lame; You have to make sure the parent of the items you want to be on top are z-indexed higher than the parents of the one you want on the bottom.:
<div style="position:relative; z-index:2;">
<div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative; z-index:1">
<div style="position:absolute; z-index:1;">BAR</div>
</div>
OR you can swap which one comes first in the HTML causing one to be rendered over the other.
<div style="position:relative;">
<div style="position:absolute; z-index:1;">BAR</div>
</div>
<div style="position:relative;">
<div style="position:absolute; z-index:1000;">FOO</div>
</div>
NOTE: This is all assuming that you're doing something with FOO and BAR that are causing them to overlap. My example clearly does not overlap so the effect would be hard to see if you copied and pasted it outright.
ADDED:
The Last Resort
To put it simply, this option sucks. But it's the only option if you absolutely must deal with this issue in IE7 and earlier.
Use JavaScript to move your div and position it where it needs to be. The basic idea here is to pull the absolute positioned div out to the body node and move it to where it needs to be. I would HIGHLY recommend using jQuery to do all of this. I made the example code without jQuery, but if you're not using jQuery yet, you should start. It will get this job done in a few lines.
<body>
<div style="position:relative; z-index:2;">
OUTERFOO
<div style="position:absolute; z-index:1000; background:red;">
FOO
</div>
</div>
<div style="position:relative; z-index:1">
OUTERBAR
<div id="bar" style="position:absolute; top:-30px; z-index:1; background:green;">
BAR
</div>
</div>
<button onclick="moveThisCrapForIE7();">Test</button>
<script type="text/javascript" language="javascript">
// Probably best to kick this off when your body is totally loaded.
// jQuery's $(document).ready is really good for that.
// for now I'm just using a button to test.
function moveThisCrapForIE7() {
// You'll need something more reliable for browser detection here, this will only get IE7 not IE6.
// I'd recommend jQuery for everything really. It'll save you miles of code.
if(navigator.appVersion.indexOf('MSIE 7') > -1) {
// Get your element and move it to where you want it.
var bar = document.getElementById('bar');
document.body.appendChild(bar);
//Then you'll need to monkey with the location
// to make sure it's where you want it.
bar.style.top = '15px';
bar.style.left = '90px';
bar.style.zIndex = '3';
}
}
</script>
</body>