在 Internet Explorer 中的 iframe 中的 PDF 上定位元素時，為什麼 z-index 不運作？

z-index Internet Explorer 中iframe 中的PDF 問題

儘管使用z-index 控制HTML 的堆疊順序很容易元素，有時會在特定瀏覽器中遇到問題。當嘗試在包含 PDF 檔案的 iframe 上定位元素時，Internet Explorer 中會出現這樣的問題。

IE 中的視窗元素與無視窗元素

了解此問題，了解 Internet Explorer 如何對 HTML 元素進行分類至關重要。它將它們分為兩種類型：

• 無視窗元素：像div 和input 這樣的元素是無視窗的，由瀏覽器在單一MSHTML 平面中呈現並遵循z-index 順序.
• 視窗元素： 像select 和ActiveX 控制項這樣的元素在MSHTML 外部呈現，並存在於繪製在無視窗元素上的單獨平面中，無論z- index 為何。

IE 中的 Iframe 異常

歷史上，iframe 是視窗元素，但這種情況在 IE 5.5 中發生了變化。雖然現在無窗口，但 iframe 仍然保留在具有較低 z-index 的視窗元素上繪製的行為，以實現向後相容性。

解決 z-index 問題

在 iframe 中的 PDF 的特定情況，由於其視窗特性，PDF 將始終呈現在常規頁面內容之上。要解決此問題，必須在頁面內容和 PDF iframe 之間放置一個額外的 iframe。這個額外的 iframe 充當“封面”，確保無視窗元素可以定位在 PDF 上。

程式碼範例

這裡是示範解決方案的修改後的程式碼範例:

<code class="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></code>

<code class="css">#outer {
    ...
    z-index: 2;
}

.cover {
    ...
    z-index: -1;
}

#pdf {
    ...
    z-index: 1;
}</code>

結論結論

以上是在 Internet Explorer 中的 iframe 中的 PDF 上定位元素時，為什麼 z-index 不運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！