Object 標籤遮擋 Div 顯示

  最近在使用 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控件標籤。dom

  由於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的子元素添加在內。
相關文章
相關標籤/搜索