Why Does z-index Fail for PDFs in Iframes in Internet Explorer?

z-index Fails in Internet Explorer for PDFs in iframes

Issue:

z-index does not function as expected for iframes displaying PDFs in Internet Explorer 8; the iframe appears above any overlapping elements.

Explanation:

Internet Explorer differentiates between windowed and windowless elements. Standard HTML elements like div and input are windowless, while elements rendered outside MSHTML (e.g., select elements and ActiveX controls) are windowed. Iframes were windowed in IE 5 but became windowless in IE 5.5. However, for backward compatibility, iframes still override windowed elements with lower z-indexes.

Solution:

To work around this issue, insert another iframe between the desired page content and the PDF iframe:

Code:

HTML:

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

CSS:

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

This additional iframe acts as a transparent overlay, preventing the PDF iframe from overlapping other page elements.

Support:

This solution has been tested and works in Internet Explorer 7-9. For compatibility with other browsers, consider adding the iframe using JavaScript or wrapping it in an IE-only conditional comment:

<code class="html"><!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]--></code>

The above is the detailed content of Why Does z-index Fail for PDFs in Iframes in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!