解决div被object遮盖的问题

如何实现将div显示在object上面呢?最近被这个问题困扰好久…
一. 原因
先分析一下原因,object标签不在dom文档流里面,浏览器在解析的时候先把object放置在最上层,然后依次解析dom文档,放在下层,并且在这里使用position和z-index是无效的,如图,因为在这里插入图片描述
图中红色部分为,我要覆盖在object上面的div盒子,但是现在被object遮盖,object标签里面是监控视频,视频我没有开;
二.解决办法
那该如何解决呢?
先放代码吧

<div>
    <div id="notify" class="errInfo">
      <iframe cals="newiframe" src="" style="position: absolute; left: 0; top: 0; z-index:-1; width: 100%; height: 100%; background-color: transparent; opacity:0; " frameborder="0"></iframe>
      <div class="errInfo_box">哈哈哈</div>
    </div>
    <div class="video-center">
      <div id="divPlugin" class="plugin"></div>
    </div>
  </div>

css样式

.errInfo {
    position: fixed;
    width: 500px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    /*background-color: rgba(255,255,255,0.1);*/
    z-index: 999;
  }
  .errInfo_box {
    width: 200px;
    height: 200px;
    font-size: 30px;
    text-align: center;
    background-color: white;
  }

好,那现在的效果是这样的…
在这里插入图片描述
这样,就可以将div覆盖在object标签上面了,那我先解释一下代码.
在这里插入图片描述
在这里插入图片描述

给div上加一层透明的iframe标签,这样会有两层,div(下面)+iframe(层),事件和数据的传递也是依靠底层的div来实现,只不过给用户看到的是iframe的表现。

但是目前存在一个问题,就是在ie浏览器上,iframe背景色不能设置为透明,各位大佬们,有知道的教教我也好!


版权声明:本文为QueenLee1原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。