IE-8 iframe and flash object ignores z-index?

Question

I have the following divs and I\'m trying to make the iframe layer infront of my_flash. It\'s a common problem and I\'ve read through all the solutions I could find and sti

Answer 1

var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};

swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0", '/swfobject/expressInstall.swf',
    flashvars, params, attributes);

Answer 2

Unfortunately, z-index does not affect Flash Player. See this example: http://demos.learnswfobject.com/html-over-swf/dynamic.html (Related tutorial)

In the example linked above, the parent element has position:"relative", and the HTML element has position:"absolute". The SWF doesn't need to have position specified. None of the elements has z-index specified. The SWF needs to have wmode set to either opaque or transparent. wmode:"opaque" is preferred to wmode:"transparent" as transparent is known to cause issues and use much more processing power than opaque.

Try this:

<style type="text/css"> 
/* establish relationship with child elements */
#wrapper { position: relative; }

/* this element will automatically appear overtop 
   of the wmode=opaque SWF without needing z-index */
#myiframe { position: absolute; }

/* No CSS needs to be specified for the SWF */
#myswf { }
</style>

<div id="wrapper"> 
    <iframe id="myiframe" src="mypage.html"></iframe> 
    <div id="myswf">This will be replaced by SWFObject</div> 
</div> 

Answer 3

You should set the wmode parameter of the Flash object when embedding with SWFObject.

Here is a short tutorial to do that.

Here is a modified code for your problem:

<script type="text/javascript">
  swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0", null, { wmode: "transparent" });
  swffit.fit("my_flash",900,650);
</script>