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

Posted 2022-03-14 jearay

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