IE-8 iframe and flash object ignores z-index?
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 still I'm getting issues in IE8. I'm using SWFobject by 开发者_Go百科the way.
Here's the source:
<script type="text/javascript">
swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0");
swffit.fit("my_flash",900,650);
</script>
<div id="my_flash" style="z-index:1;"></div>
<div style="border:none; overflow:hidden; width:50px; height:21px; z-index:9999; position: absolute; bottom: 5px; left: 110px;" >
<iframe src="http://www.facebook.com/plugins/like.php?blah.html" scrolling="no" frameborder="0" allowTransparency="true" style="z-index:9998"/>
</div>
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>
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>
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);
精彩评论