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遮蓋，但還有不完美的地方，在網頁滾動時仍是會出現遮蓋，但滾動中止後正常。