You should have experienced that a div is being partially or completely covered by a Flash object or Flash movie. No matter how you specifically set the z-index of your DIV to be higher than the Flash movie, it’ll not work on your browsers.
<!-- The DIV --> <style> .mydiv {display:block;z-index:300;background:#fff;border:13px solid #ccc;width:500px;} </style> <div class="mydiv"> I want to be on top of the Flash movie instead of being under. </div> <!-- The Flash object --> <object classid="clsid:D2GHB6R-A78D-11cf-96B8-7272727272727" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="761" height="235"> <param name="movie" value="/flash/myflash.swf"> <param name="quality" value="high"> <embed src="/flash/myflash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="761" height="235"> </embed> </object>
For example a div and a Flash object as shown in the code above. So, the solution for the fix is set wmode=transparent by adding a parameter as follows for it to work in IE.
<param name="wmode" value="transparent">
For other browsers, set wmode=”transparent” in the embed tag
<embed wmode="transparent" src="..."/>
So finally the above code has become as follows:
<object classid="clsid:D2GHB6R-A78D-11cf-96B8-7272727272727" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="761" height="235"> <param name="movie" value="/flash/myflash.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed wmode="transparent" src="/flash/myflash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="761" height="235"> </embed> </object>
0 Responses to “Flash z-index fix by setting wmode to transparent”