z-index does not work in Internet Explorer with pdf in iframe

Doyle發表於2019-02-16
Index

I know of one technique to reliably occlude windowed controls in IE with other elements, but you`re not going to like it.

Background: windowed and windowless elements

IE categorises elements into two types: windowed and windowless. Regular elements like div and input are windowless, rendered directly by the MSHTML engine. Windowed elements, however, are rendered in a separate MSHTML plane and get painted over any elements intruding in the space reserved for them. They respect z-index for each other, but always paint on top of windowless elements.

The only exception to this rule is iframe. In IE 5, iframe was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index. Crucially, it also respects z-index for windowless elements—so if you position an iframe over a windowed element, any windowless elements you position over the iframe will be visible.

What this means

Essentially, the PDF is painted on top of the regular page content—like select elements were until IE 7. The easiest fix is to use another iframe positioned between your content and the PDF.

Demo

jsFiddle: http://jsfiddle.net/Jordan/gDuCE

Code

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

Support

This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:

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

相關文章