在 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>

結論結論

結論結論結論結論結論結論結論結論結論結論結論結論結論結論透過使用額外的「cover」iframe，可以強制元素在Internet 中的iframe 中顯示在PDF 上Explorer，即使z-index 最初看起來無效。此解決方法提供了針對特定 Internet Explorer 行為的解決方案，並確保維持預期的堆疊順序。

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