How to show a div over a select box, iframe, flash, java applet, etc

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: , ,

This entry was posted on Friday, April 10th, 2009 at 2:56 pmand is filed under CSS, JavaScript/DOM. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “How to show a div over a select box, iframe, flash, java applet, etc”

Leave a Reply