美文网首页
object覆盖的div解决办法

object覆盖的div解决办法

作者: 武鹏磊 | 来源:发表于2017-06-28 17:03 被阅读0次

           最近做个web项目,因为里面有个object的插件,弹出对话框会被其遮盖,我做了个iframe标签,在弹框时,把object覆盖掉,再在iframe上放个div对话框。这是这个问题的解决思路。终于将这个问题解决掉了,我将思路分享给大家以供参考。


    (一)首先给大家介绍一下object标签:W3school有解释

    定义和用法

    定义一个嵌入的对象。请使用此元素向您的XHTML页面添加多媒体。此元素允许您规定插入HTML文档中的对象的数据和参数,以及可用来显示和操作数据的代码。

    object标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF以及Flash。

    object的初衷是取代img和applet元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。

    浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。

    而幸运的是,object对象提供了解决方案。如果未显示object元素,就会执行位于object之间的代码。通过这种方式,我们能够嵌套多个object元素(每个对应一个浏览器)。

    总的来说object标签就是用来嵌入多媒体的。

    (二)简单介绍几个object标签的重要属性:

    classid --关联一个应用程序,执行嵌入内容的应用程序在windows系统中的唯一id(不能改变此id,否则程序将出现异常),例如clsid:D27CDB6E-AE6D-11cf-96B8-444553540000-- Flash

    data --规定对象使用的资源的URL。

    (三)object标签在IE上覆盖问题

    查询相关资源后发现在IE中是一个windowed element,即窗口元素,这些元素总是会被渲染在非窗口元素的上方,唯一的解决方案就是使用iframe作为中间物,即用iframe覆盖object,再用div覆盖iframe。

    注意:

    1.div必须有特定的z-index且大于iframe的z-index,不能是auto或空;

    2.iframe的z-index必须为负(之前一直设置为正值,虽然小于div的z-index,但一直不能被div遮盖),否则,div无法遮盖iframe;

    3.iframe的top和left为0,且iframe的宽、高与div的宽高相等;

    4.注意设置iframe的透明度为0.

    5.如果页面有多处弹出框,可以使用js动态添加iframe。

    相关文章

      网友评论

          本文标题:object覆盖的div解决办法

          本文链接:https://www.haomeiwen.com/subject/qwwucxtx.html