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

起因
设计要求视频控制面板显示在视频界面上,如下图红框内所示。但是因为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 

原文地址:https://www.cnblogs.com/jearay/p/11130951.html