Z-Index Does Not Work in Internet Explorer with PDF in Iframe

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

Update: Matthew Wise has a really clever alternative solution which you should consider—especially if you're having trouble with my approach or dislike ugly hacks!

---

There is a way to cover windowed elements in IE with other elements, but you're not going to like it.

Background: windowed and windowless elements

Legacy IE categorises elements into two types: windowed and windowless.

Regular elements like div and input are windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.

Elements rendered outside of MSHTML are windowed; for example, select (rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.

The only exception 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

In other words: iframe respects z-index for both windowed and windowless elements. If you position an iframe over a windowed element, any windowless elements positioned over the iframe will be visible!

What this means

The PDF will always be painted on top of the regular page content—like select elements were until IE 7. The fix is to position another iframe 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]-->

zIndex issue with pdf inside iframe in IE

I was having this same issue with any free floating elements on the page in IE, this function fixes the issue.

function fixPDFzIndexIssue (idToFix) {
    if(!idToFix) return "Please provide the id of the div to fix";

    var $divToFix = $('#' + idToFix);

    $divToFix.wrap("<div class='outer'></div>");

    $(".outer").append("<iframe src='about:blank' class='cover'>");
    $(".cover").css({
        'min-width': '100%',
        'min-height': '100%',       
        'overflow': 'hidden',
        'position': 'absolute',
        'border': 'none',
        'left': 0,
        'top':0,
        'z-index': -1
    });
}

It seems that any div that is hovering over a PDF requires an iFrame to be placed underneath it so that it renders over the PDF.

Ignored z-index with IFrame. Drop down menu hidden.

After a week of trying different solutions and fixes, i couldnt find anything that would work for my specific situation. Instead i just made the vertical spacing on my sub menus much shorter and pushed the pdf in the iframe further down on the page so the drop down menus never overlap.

How can I make iframe respect z-index in IE?

Try using Youtubes iframe embed method (if thats not what you are already doing, and add:
?wmode=transparent to the url (replace ? with & if it is not the first url variable)

---

Related Topics