IE中iframe標簽顯示在DIV之上的問題解決方案

在做網頁時前端時，使用IE打開時會出現標題欄DIV被遮擋PDF遮擋，

 后在stackoverflow中查到是IE瀏覽器的問題：鏈接https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe--

以下是翻譯：

有一種方法可以用IE中的其他元素覆蓋IE中的窗口元素，但是你不會喜歡它。

背景：窗口和無窗口元素
舊 IE將元素分為兩種類型：windowed和windowless。

像div和輸入這樣的常規元素是無窗口的。它們由瀏覽器本身在單個MSHTML平面中呈現，並且尊重彼此的z順序。

在MSHTML之外呈現的元素是窗口化的;例如，選擇（由OS呈現）和ActiveX控件。他們尊重彼此的z順序，但占據一個單獨的MSHTML平面，該平面繪制在所有無窗元素之上。

唯一的例外是iframe。在IE 5中，iframe是一個窗口元素。這在IE 5.5中有所改變;它現在是一個無窗口元素，但出於向后兼容的原因，它仍然會繪制具有較低z-index的窗口元素

換句話說：iframe尊重窗口和無窗口元素的z-index。如果您將iframe放置在窗口元素上，則可以看到位於iframe上方的任何無窗口元素！

這意味着什么
PDF將始終繪制在常規頁面內容之上，類似於選擇元素，直到IE 7.修復是在您的內容和PDF之間定位另一個iframe。

html:

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

CSS:

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

利用上述代碼加入自己的界面后實現了iframe被div遮蓋，但還有不完美的地方，在網頁滾動時還是會出現遮蓋，但滾動停止后正常。