object 遮挡div
object的层级属于windows层,与浏览器同级,故浏览器中设置z-index对其没有效果,会遮挡普通div,但iframe是个特例,能够遮挡object,于是想在object上面放置div就可以在object的上面加个iframe,再加自己的div。
即,类似如下代码
<div id="your-panel" style="position:relative;width:500px;height:500px;">
<object width="100%" height = "100%"></object>
<iframe src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:44px"></iframe>
<div id="your_div" style="position:absolute;top:5px;left:100px;width:200px;height:34px;"></div>
</div>
上面只是一个提供一个思路,你可以做自己的样式
这里还有个问题是iframe无法透明化,即加了iframe后会把底下的object遮挡,当然也可以使用iframe 的allowtransparency,然后引入一个空的背景为透明的页面来做透明,但这种情况下,object又会把上面的div层遮挡
object 全屏时只剩左上角一块,无法真正全屏
项目组里封装的object 无法与css样式中的hover伪类共存,只要存在hover伪类(a:hover可以,其他的我试了很多都不行)便会导致这个问题,于是只能去掉所有的hover伪类,运行正常
这个只是我遇到的问题解决办法,希望大家做个参考。