UPDATE: Try the Position-Relative Z-index Bug Fix to see if that clears up your issue first. It’s worked for us.
Are you or anyone you know (who’s up to our high standards of geekery), ever encountered any of these issues?
- No matter how high you set the z-index of your absolutely or relatively positioned element, it still displays under:
- A <select> box
- A flash movie
- A Java applet
- A SIFR headline
* Also have you noticed how this is yet another seemingly exclusive IE issue?? Are you surprised? Do you want to buy us a beer?
Internet Explorer: A browser or a sweaty toothed madman?
Good question.
The Solution
It is important to note that the SIFR, and flash movies can be made to display behind elements by setting the wmode parameter. However, sometimes this doesn’t seem to work in IE, especially IE6 (We were amazed there). There is another workaround, which involves iFrames: which always display above everything in IE. Therefore, there are some great scripts showing how to create these iframe shims on the fly and insert them behind your menu, or absolutely positioned element.
Us being industrius decided to use jQuery to create these shims onload and dynamically insert them.
Then, us being lazy, decided to search for something already in existence.
Low and behold, the jQuery bgiframe plugin. How I love thee jQuery.
Tags: ie bug, Internet Explorer, SIFR