Solution to Flash and Select Drop-downs Covering HTML Elements

I\’ve positioned elements absolutely and had to deal with a bug where the element appears below a flash object or select drop-downs, which usually occurs in IE. I\’ve seen a few solutions, which work great, and I have one more to add.

Solution 1: iFrame

This solution comes from Joe King\’s post.

In case you don\’t already know, windowed controls in IE will always cover DHTML layers. That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element.

The solution is to create an iFrame shim under the element that needs to appear above the select drop down.

var element = $(\'id_of_element\');
var iframe_shim = new Element(\'iframe\', {
    \'id\': \'shim\',
    \'scrolling\': \'no\',
    \'frameborder\': 0,
    \'styles\': {
        \'width\': element.getSize().x, //Plug in the width of absolutely positioned object here
        \'height\': element.getSize().y;, //Plug in the height of absolutely positioned object here
        \'filter\': \'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\' // fixes transparency
    }
}).inject(element,\'after\'); //this automatically injects the shim after the element.

Keep in mind you\’ll probably need to modify this to work with your needs. E.g. For drop down navigation, you would create the shim and use Javascript to make adjustments to the position and dimensions of the shim to reflect that dropped down menu in the navigation.

Solution 2: Flash Param: wmode=transparent

This solution was found on CSS Play by Stu and Fran Nicholls.

So you have a flash object and you require HTML elements to appear above it. You set the HTML elements positioning to absolute and try z-index, which probably didn\’t work in IE. You only need to set the flash object\’s wmode parameter to transparent to fix this. Use the <param> to set the name/value, and set the wmode attribute on the <embed> tag like so:

Solution 3: Markup Hierarchy

Let\’s say you have a flash object that you have no control over, such as a YouTube video. The flash object comes in with wmode=\”window\” or something. What do you do? Consider markup hierarchy. In IE, the next HTML element is considered at a higher layer than the element before it.

Box 1
Box 2

Box 1 will appear above Box 2. So using the drop down navigation as an example again (from solution 1) I would use Javascript to relocate the navigation\’s html markup below the flash object and adjust the positioning of the nav to make it look like it never moved via CSS.