如何实现将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版权协议,转载请附上原文出处链接和本声明。