object 覆盖 div 在IE 和Firefox 的解决方案

问题描述

公司产品需要在三维(3D)控件上显示弹框,按钮等,然而三维控件的object覆盖了div,弹框和按钮不能显示

firefox 解决方案

最外层div的背景使用不透明背景色,必须是不透明的哦

IE 解决方案

友情提示: object 标签,在浏览器解析的时候会自动将其加载到当前窗口的最顶层,因此会覆盖div(无论div的层级多高)。
div标签 > iframe标签 > object 标签,因此我们可以使用iframe 覆盖object

<div id='dialogWrap'>
    <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:absolute; visibility:inherit; top:0px;left:0px;100%; height:310px;z-index:-1; filter:alpha(opacity=0);"></iframe>
    <div>弹出层内容</div>
</div>
  • iframe 的z-index设为-1;
  • dialagWrap 的z-index值一定要大于iframe的z-index值

  • iframe 的宽高和#dialogWrap的宽高一样,背景设为透明,如果src是一个页面,则一定要设置该页面的body背景色透明

原文地址:https://www.cnblogs.com/hukeer/p/6780630.html