最近在使用 Object 時,就是播放視頻的 Object 標簽遮擋住其他 div 標簽,不能正常顯示。
出現這種現象的原因:
object 標簽不在 dom 文檔流里面,瀏覽器在解析的時候先把 object 放置在最上層,然后依次解析dom文檔,放在下層,並且在這里使用z-index是無效的。
在被遮擋得 div 中添加 iframe 標簽,如下:
<div id="demodiv" style="width: 120px; height:120px;DISPLAY: none; top: 26px; left: 300px;z-index:999999"> <ul> <li>關閉</li> <li>刷新</li> <li>關閉其他</li> <li>關閉全部</li> </ul> <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0"
style="position:absolute; visibility:inherit; top:0px;left:0px;width:120px; height:120px;z-index:-1; filter:alpha(opacity=0);"></iframe> </div>
說明一下:div為需顯示的div,被object遮擋,於是在該div中增加一個iframe,通過iframe來遮擋Object控件標簽。
因為iframe的級別高於Objec標簽,而又由於div能夠遮擋iframe,所以可以通過在div中加入iframe來解決該類問題。
其中有幾點需要注意:
1.div必須有特定的z-index且大於iframe的z-index,不能是auto或空;
2.iframe的z-index必須為負,否則,div無法遮蓋iframe;
3.iframe的top和left為0,且iframe的寬、高與div的寬高相等剛好完全覆蓋;
4.注意設置iframe的透明度為0.
5.iframe作為顯示div的子元素添加在內。