起因
设计要求视频控制面板显示在视频界面上,如下图红框内所示。但是因为object不在文档流之中,所以不论别的元素设置z-index多高,都只会被object元素遮住而无法看到。
object元素代码如下

<object
id="EZUIKit"
width="400"
height="400"
border="0"
name="EZUIKit">
</object>

解决方案
方法一: 直接设置属性值
在代码中增加属性

value="transparent"
<object
id="EZUIKit"
width="400"
height="400"
border="0"
value="transparent"
name="EZUIKit">
</object>

在谷歌等浏览器中有效,但是IE中无效,因为需要activeX插件支持,必须兼容IE,所以此方法不适用,尝试第二种方法

方法二:iframe
iframe 元素会创建包含另外一个文档的内联框架,所以将object元素或者要放置在object上的元素包含在iframe中,可以做到高于object元素显示,我选择的是后者,将需要显示在视频上的内容嵌入iframe中的页面

<iframe>
需要显示在object上的标签内容
</iframe>

确实可以显示在object元素之上,但是却不透明。如下图,会一整块遮挡住下面的视频内容。

设置属性allowtransparency="true"后在谷歌浏览器中会透明,可以显示下面的视频,但IE中无效,所以需要继续尝试。

<iframe allowtransparency="true">
</iframe>

设置iframe的背景色透明

<iframe allowtransparency="true" style="background-color: transparent">
</iframe>

设置后iframe背景透明,但是却无视了中间的object,穿透了object,直接显示的是iframe所在的父元素背景色,即使将iframe父元素设置透明也无用,会继续显示父元素的父元素背景色,无法显示该区域遮挡住的视频内容。

结论
IE中无法做到div元素显示在上并背景色透明的效果,谷歌可以实现,IE建议除非需要整块遮挡下面的视频而不需要透明,否则将需要放置在object上的元素移出来,与object互不干涉。
---------------------
作者:云端的幻影
来源:CSDN
原文:https://blog.csdn.net/weixin_44849078/article/details/89160520

转:使用ActiveX插件时object显示问题,div被object标签遮挡的解决方案的更多相关文章

  1. easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  2. (转)eclipse 启动参数介绍(如添加插件时,如果不显示,则使用eclipse -clean启动)

    本文转载自:http://hi.baidu.com/dd_taiyangxue/blog/item/08950f3991b4e8c9d46225c8.html 其实,Eclipse是一个可以进行非常灵 ...

  3. 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  4. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  5. javascript检测ActiveX插件是否安装/启用

    本文主要提供在IE浏览器下检测ActiveX插件安装/启用的状态. 在一些应用开发中,需要用到一些第三方提供的ActiveX插件,如Flash插件. 为了在未安装插件的浏览器显示友好的提示,需要用到主 ...

  6. ActiveX插件的Z-Index属性无效问题解决

    在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种方式在多数情况下很有效,但是如果遇到有窗体元素时这种方式常常显得无能为力,今天我们就一块看一下如何有效的解决这个问题. 在Web ...

  7. 【CSharp】C#开发ActiveX插件

    这几天Web项目中需要用到ActiveX插件(PS:听说这个是好久好久的东西了...),由于项目中需要调用本地资源所以只能研究研究这位老兄了. 先说说自己学习他的经历,开始的时候是用百度引擎检索自己所 ...

  8. C#开发ActiveX插件-aspx中嵌入

    刚到新的公司,第一周让我熟悉一下他们用的silverlight和arcgis.这周,也就是昨天分配了我一个小小的任务! 哪个项目的不知道,是让我实现一个在aspx中嵌入activeX插件! 在网上找了 ...

  9. IE添加可信任站点,启用ActiveX插件批处理

    添加可信任站点IP地址为:192.168.1.108,启用ActiveX插件执行以下批处理命令: reg add "HKCU\Software\Microsoft\Windows\Curre ...

随机推荐

  1. git log master..origin/master --oneline | wc -l 怎么知道本地仓库是不是最新的

    git log master..origin/master --oneline | wc -l 怎么知道本地仓库是不是最新的 git fetch   # 一定要先 fetch git log mast ...

  2. Spring入门篇——第7章 Spring对AspectJ的支持

    第7章 Spring对AspectJ的支持 介绍Spring对AspectJ的支持 7-1 AspectJ介绍及Pointcut注解应用 实例 完成了在xml文件的配置 7-2 Advice定义及实例 ...

  3. mysql基础_数据类型

    1.数字 (1)tinyint(小整数值) 范围:有符号(-128,127) 无符号(0.255) (2)int(大整数值) 范围:有符号  (-2 147 483 648,2 147 483 647 ...

  4. SpringBoot项目中使用Bootstrap 的CSS、JS资源

    首先 需要在 application.properties 文件中添加这句 spring.mvc.static-path-pattern=/** 不然是使用不了的 还有一种办法就是 使用bootstr ...

  5. 获取DataFrame列名的3种方法

    df= pd.DataFrame({'a': range(10, 20), 'b': range(20, 30)}) df 1.链表推倒式 [column for column in df][a,b] ...

  6. shell爬取斗图网

    #!/bin/bash read -p "请输入要爬取的页面数(默认为10):" page_num page_num=${page_num:-} echo $page_num re ...

  7. http协议。会话控制cookie、session

    http协议是无状态的协议.每次访问页面的http协议都是独立的,正是因为http协议是无状态的,所以导致访问一个页面后再去访问另一个页面的时候,一些数据会消失,比如:用户的登录信息就会消失.那么怎么 ...

  8. MFC 用户登录、注册、工作主窗体

    创建项目由向导生成的窗体作为工作的主窗体.用户登录.注册窗体添加对话框来实现. [具体功能] 1.主窗体应该出现在登录窗体成功之后. 2.登录窗体关闭(右上角❌),程序直接退出. 在App.cpp的I ...

  9. 04 JQuery的使用

    01 对网站首页优化--定时弹出广告 <!-- 作者:offline 时间:2018-09-09 描述:在使用JQ前要导入jquery-1.11.0.min.js包 注意区分js和jq的对象 - ...

  10. js监听页面标签切换

    var OriginTitile = document.title, titleTime; document.addEventListener('visibilitychange', function ...