Why doesn\'t z-index work when positioning elements over a PDF in an iframe in Internet Explorer?

z-index Issue with PDF in iframe in Internet Explorer

Despite the ease of using z-index to control the stacking order of HTML elements, it can sometimes encounter issues in specific browsers. One such issue arises in Internet Explorer when attempting to position an element over an iframe containing a PDF file.

Windowed vs. Windowless Elements in IE

To understand this issue, it's essential to be aware of how Internet Explorer categorizes HTML elements. It classifies them into two types:

• Windowless Elements: Elements like div and input are windowless, rendered by the browser in a single MSHTML plane and adhering to the z-index order.
• Windowed Elements: Elements like select and ActiveX controls are rendered outside MSHTML and exist in a separate plane that's painted over the windowless elements, regardless of z-index.

Iframe Exception in IE

Historically, iframes were windowed elements, but this changed in IE 5.5. While now windowless, iframes still retain the behavior of drawing over windowed elements with a lower z-index for backward compatibility.

Resolving the z-index Issue

In the specific case of a PDF in an iframe, the PDF will always be rendered on top of the regular page content due to its windowed nature. To resolve this issue, an additional iframe must be positioned between the page content and the PDF iframe. This additional iframe acts as a "cover" and ensures that windowless elements can be positioned over the PDF.

Code Sample

Here's a revised code sample that demonstrates the solution:

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

Conclusion

By utilizing an additional "cover" iframe, it's possible to force elements to appear over a PDF in an iframe in Internet Explorer, even if the z-index appears to be ineffective initially. This workaround provides a solution to a specific Internet Explorer behavior and ensures that the intended stacking order is maintained.

The above is the detailed content of Why doesn\'t z-index work when positioning elements over a PDF in an iframe in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!