wmode参数：

transparent模式：可用z-index控制层级

opaque模式：可用z-index控制层级

window模式：flash层级在浏览器核心显示窗口之上，flash会盖住与他重合的html

情景1（可修改flash的wmode参数）

修改wmode属性为，transparent或opaque

DEMO如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> HTML元素遮挡Flash之梦 - 情景1 </title>

    <style>

        html, body, object, embed{ padding: 0; margin: 0; }

        .m-box { position: relative; }

        .m-flash, .m-flash embed { width: 400px; }

        .m-shadow { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc; }

    </style>

</head>

<body>

<!--transparent-->

<div class="m-box">

    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

        <param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">

        <param name="wmode" value="transparent"/>

        <embed wmode="transparent" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>

    </object>

    <div class="m-shadow">

        Jununx，欢迎您！--transparent

    </div>

</div>

<!--opaque-->

<div class="m-box">

    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

        <param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">

        <param name="wmode" value="opaque"/>

        <embed wmode="opaque" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>

    </object>

    <div class="m-shadow">

        Jununx，欢迎您！--opaque

    </div>

</div>

</body>

</html>

情景2（不可修改flash的wmode参数）-- flash和你的iframe遮挡层在同一个页面

注：如果要兼容Safari、Opera，那么请直接告诉需求这个遮不了

DEMO如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> HTML元素遮挡Flash之梦 - 情景2 </title>

    <style>

        html, body, object, embed{ padding: 0; margin: 0; }

        .m-box { position: relative; }

        .m-flash, .m-flash embed { width: 400px; }

        .m-flash { position: relative; z-index: 1; }

        .m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }

        .m-shadow-txt { position: absolute; z-index: 2; }

        .m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }

    </style>

</head>

<body>

<!--window-->

<div class="m-box">

    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

        <param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">

        <param name="wmode" value="window"/>

        <embed wmode="window" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>

    </object>

    <div class="m-shadow">

        <div class="m-shadow-txt">Jununx，欢迎您！--window</div>

        <iframe class="m-shadow-ifr" frameborder="0"></iframe>

    </div>

</div>

</body>

</html>

情景3（不可修改flash的wmode参数）-- flash是被一个iframe页面引入的

注：如果木有权限操作iframe页面，那么请直接告诉需求这个遮不了

注：如果要兼容Safari、Opera，那么请直接告诉需求这个遮不了 

DEMO页：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> HTML元素遮挡Flash之梦 - 情景2 </title>

    <style>

        html, body, object, embed{ padding: 0; margin: 0; }

        .m-box { position: relative; }

        .m-flash { position: relative; width: 400px; height: 400px; z-index: 1; }

        .m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }

        .m-shadow-txt { position: absolute; z-index: 2; }

        .m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }

    </style>

</head>

<body>

<!--window-->

<div class="m-box">

    <iframe class="m-flash" src="ifr.html" frameborder="0"></iframe>

    <div class="m-shadow">

        <div class="m-shadow-txt">Jununx，欢迎您！--window</div>

        <iframe class="m-shadow-ifr" frameborder="0"></iframe>

    </div>

</div>

</body>

</html>

iframe页：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title> HTML元素遮挡Flash之梦 - 情景3 </title>

    <style>

        html, body, object, embed{ padding: 0; margin: 0; }

        .ifr { position: absolute; z-index: 2; width: 100px; height: 100px; opacity: 0; filter: alpha(opacity=0); }

        .m-flash { position: absolute; z-index: 1;  width: 400px; }

    </style>

</head>

<body>

<!--window-->

<object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

    <param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">

    <param name="wmode" value="window"/>

    <embed wmode="window" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>

</object>

<iframe class="ifr" frameborder="0"></iframe>

</body>

</html>

HTML元素遮挡Flash之梦的更多相关文章

  1. 防止fixed元素遮挡其他元素的方法

    有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...

  2. 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

    标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...

  3. IE下object元素遮挡div表单

    目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...

  4. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

  5. espresso 元素遮挡问题。

    在使用espresso进行测试的时候,点击一个横向列表的时候会在点击的项目下出现对应的横线. 实现方式是在FrameLayout下放两个TextView, 一个TextView包含下划线,默认是Fra ...

  6. ie6绝对定位的块会被select元素遮挡的解决方案

    RT(已无力吐槽ie),解决方法是:定义一个iframe,与想要显示的绝对定位的块设置为同一大小.放在同一个位置上.我的网页里绝对定位的元素是会随着鼠标移动显示和隐藏的,于是这个frame也要跟着显示 ...

  7. 网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

    一:网页中插入flash代码如下:  当然里面的很多属性可以去掉,根据具体的需求而定.  我们在网页中经常遇到播放flash,要正常播放flash就要用到OBJECT和EMBED这两个标签.鉴于火狐及 ...

  8. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  9. 网页中创建音频、视频和Flash等多媒体：object元素

    <object>元素:它主要用于定义网页中的多媒体,比如音频.视频.Java applets.PDF.ActiveX和Flash.Object标签是成对出现的,在object标签内可以使用 ...

随机推荐

  1. jquery keyup 在IOS设备上输入中文时不触发

    今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...

  2. 求四百万以内Fibonacci(number)数列偶数结果的总和

    又对啦...开心~~~~ 只是代码可能不符合PEP标准什么的... Each new term in the Fibonacci sequence is generated by adding the ...

  3. @Valid springMVC bean校验不起作用及如何统一处理校验

    SpringMVC 使用JSR-303进行校验 @Valid 使用注解 一.准备校验时使用的JAR validation-api-1.0.0.GA.jar:JDK的接口: hibernate-vali ...

  4. 【转】android中如何查看某个线程的logcat--不错

    原文网址:http://my.oschina.net/u/236164/blog/51022 单一个项目由很多人开发,然后大家各自打各自的log.到最后logcat就根本没法看了. adb自带的参数里 ...

  5. C# 同步/并发队列ConcurrentQueue （表示线程安全的先进先出 (FIFO) 集合）

    http://msdn.microsoft.com/zh-cn/library/dd267265(v=vs.110).aspx static void Main(string[] args) { // ...

  6. [LeetCode] 61. Rotate List 解题思路

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...

  7. servlet过滤器配置白名单、黑名单

    1.web.xml配置 <filter> <description>过滤是否登陆</description> <filter-name>encoding ...

  8. 【转】MVC5中的区域(Areas)

    MVC本身提倡的就是关注点分离.但是当项目本身的业务逻辑足够复杂,如果所有的业务逻辑都写个Controller文件夹下面的时候,你会看到非常庞大的各种命名的Controller,这个时候区域的作用就非 ...

  9. Intellj Idea 2016.1.3的使用

    Intellj Idea 2016.1.3的使用:http://blog.csdn.net/bleachswh/article/details/51811055 极客学院教程:http://wiki. ...

  10. hibernate generator class="" id详解

    “assigned”   主键由外部程序负责生成,在   save()   之前指定一个.         “hilo”   通过hi/lo   算法实现的主键生成机制,需要额外的数据库表或字段提供高 ...