How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn't work, it always appears behind the relatively positioned element.
+6
A:
Known issue, well-documented fix:
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/
Nissan Fan
2009-07-20 22:01:04
For a slightly more in-depth look at the bug: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/
Stargazer712
2010-07-27 15:45:04
The fix might be well-documented but it is wrong (though it might work in some cases by chance), and the author clearly does not understand what the problem is. (The link given by Stargazer is good, though.) See [my comment in another thread](http://stackoverflow.com/questions/672228/ie-6-ie-7-z-index-problem/3998006#3998006) for an explanation and some more general solutions.
Tgr
2010-10-23 08:08:32
A:
Internet Explorer and z-index is a HUGE pain. It does work.
Run a google search for "IE z-index bug" and you'll be able to find help that will relate to your markup
EDIT: If you're going to mark my answer down, please explain why. If I'm wrong I'd also like to know why
David Archer
2009-07-20 22:01:25
Telling someone to google for the solution is a terrible answer; it doesn't make *this* page any more useful. You should at least post a link to a page that explains this bug.
SpoonMeiser
2009-07-20 22:04:16
IMO opinion the fix is can be many things. e.g depending on parent elem z-index, relative z-index etc. The question was not clear enough (code sample etc) so I was trying to help
David Archer
2009-07-20 22:05:42
+1
A:
You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?
In those cases z-index is a lost cause.
Otherwise what browser version are you using and are you using absolute positioning?
Zyphrax
2009-07-20 22:02:55
A:
I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:
<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.
<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.
I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!
Omri
2010-01-12 09:35:42