通过设置Div层跟Flash层的z-index并不能使Div层覆盖Flash层。
官方解释：
A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order
(”z-index”) of those layers.
解决方案：
1. 修改flash自身属性，适用 Firefox 跟 IE
这种方案需要修改flash代码，使flash在加载时为透明的，所以div层可以覆盖这个flash。
在原来的flash代码中添加<param name=’wmode’ value=’transparent’>
在<embed>中添加属性 wmode＝’transparent’
a. 原始的flash代码
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'
width='400px' height='340px'>
<param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
<param name='quality' value='high' />
<embed src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
type='application/x-shockwave-flash' width='400' height='340'>
</embed>
</object>
b. 修改后的代码
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'
width='400px' height='340px'>
<param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
<param name='wmode' value='transparent'>
<param name='quality' value='high' />
<embed wmode='transparent' src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
type='application/x-shockwave-flash' width='400' height='340'>
</embed>
</object>
2. 修改position属性[[BR]][[BR]]
把用来覆盖Flash的Div层设置position:fixed。由于ie不支持fixed，所以这种方式只适用于Firefox。
a. 示例代码
<html>
<head>
<title>div cover flash with fixed property</title>
</head>
<body>
<div id="cover_div" style="position:fixed;width:100px;height:100px;background-color:blue;">I cover the Flash.</div>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'
width='400px' height='340px'>
<param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
<param name='quality' value='high' />
<embed src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
type='application/x-shockwave-flash' width='400' height='340'>
</embed>
</object>
</body>
</html>
3. 使用iframe
使用iframe的方式可以同时支持firefox跟IE，但是实现方式略有不同。
原理都是先用iframe盖住flash，然后设置iframe的z-index使div能盖住这个iframe。
但是在firefox中iframe 默认状态下不能盖住 flash，需要将flash所在层的autoflow属性设为auto，IE下没有此问题。
a. 在firefox中的示例代码
<html>
<head>
<title>div cover flash with iframe</title>
</head>
<body>
<div id="cover_div" style="position:absolute;width:100px;height:100px;background-color:blue;z-index:9">I cover the Flash.</div>
<div style="overflow:auto;">
<iframe id="cover_iframe" frameborder="0" style="position:absolute;width:100px;height:100px;z-index:8;"></iframe>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'
width='400px' height='340px'>
<param name='movie' value='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' />
<param name='quality' value='high' />
<embed src='http://blog.ku6.com/ku6_v.swf?id=38752_1011788' quality='high'
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
type='application/x-shockwave-flash' width='400' height='340'>
</embed>
</object>
</div>
</body>
</html>
注：
“<div style=”overflow:auto;”><iframe>…</iframe><object>…</object></div>” firefox 中必须使用这种结构才有效
在IE中只需要使iframe与div在一个同一个位置即可。
分享到：
相关推荐
3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载...
82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...
82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...
82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...
本域和其他域的交互，可以通过iframe、代理、JS创建动态脚本等几种方法来实现，这里有篇文章对几种方法作了简要的介绍。 iframe、JS创建动态脚本这两种方法，需要开发者能控制两个域，两端都要编写相应的代码，...
HybridApp 一种可以下载的Native App，其用户界面的全部或者部分元素在嵌入式浏览器组件（WebView之类的）里面运行 优雅降级 一开始就构建站点的完整功能，然后针对浏览器测试和修复。认为应该针对那些最高级、最...
若使用table布局网页，在使用不同浏览器情况下会发生错位，而div css则不会，无论什么浏览器，网页都不会出现变形情况。 最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响...
若使用table布局网页，在使用不同浏览器情况下会发生错位，而div css则不会，无论什么浏览器，网页都不会出现变形情况。 最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响...
若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。 最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响...
注意：网页标题是指显示在浏览器标 题栏上的文字，而不是网页中的段落标题。每个网页都能够返回上一级页面或首页。 （5）网站中要使用CSS，要使用行为制作动态效果，超链接效果正确无误，要有锚点链 接，要有背景...
82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...
+PageManager的实例方法AddAjaxUpdateControl改名为AddAjaxAspnetControls，现在可以在Page_Load中设置需要在AJAX中需要更新的Asp.net控件了。 -在Page_Load中设置了哪些需要在AJAX中更新的Asp.net控件会在回发时...
-增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和GetHideReference(feedback:anson)。 -修正绑定到Tree的XMLDocument中Icon属性映射错误(feedback:nopnop9)。 -修正...
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID號").name(或value) 6.一个小写转大写的JS: document....
5、加上几种我们常用的字体的方法，例如： 修改 FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; 为 FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;...
加上几种我们常用的字体 FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; 11.添加文件 添加文件 /TestFCKeditor/test.jsp: *" %> ...