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

Question

I cannot get z-index working on a iframe that contains a pdf file with IE8. It works with Google Chrome.

Example (JSFiddle):

HTML

<div id="div-text">
      <div id="shouldBeOnTop">my text that should be on top</div>
</div>
<div id="div-frame">
    <iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/>
</div>

CSS

#div-text{
    position:relative;
    left:210px;
    top:20px
}

#shouldBeOnTop{
    position:relative;
    right:60px;
    background-color:red;
    width:100px;
    z-index:2;
}

#div-frame{
    position:relative;
     z-index:1;
}

Answer 1

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

Answer 2

The workaround with the additional IFRAME does work in simple cases but I have spent a morning trying to get the overlay to respect transparency. Basically our application has modal popups whereby a full-window overlay behind the popups is rendered 'greyed out' (background colour black, opacity 0.25) to indicate to the user that the pop-ups are modal. With the workaround, the embedded PDF view never gets greyed out with the rest of the window so still looks 'active' and indeed you can still interact with the PDF viewer.

Our solution is to use Mozilla's pdf.js library: https://github.com/mozilla/pdf.js/ - embedding an IFRAME pointing at the test URL http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf works straight out of the box respecting z-index, transparency, the lot, no hacks required! Seems that they use their own rendering engine which generates standard HTML representing the content of the PDF.

Answer 3

I Had been trying to fix the same issue and my scenario was similar. I was trying to render a youtube Video on my page and on top of the video i wanted to place some div with some information.

But the youtube video being contained into an iframe wasn't letting me do that. Irrespective of the
z-index that i gave to the elements.

Then this post helped - https://stackoverflow.com/a/9074366/1484384

Basically its about the wmode. Check the above post to see how to work with it.

Here is some code from that post:

<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">

Or

//Fix z-index youtube video embedding

$(document).ready(function (){
  $('iframe').each(function(){
    var url = $(this).attr("src");
    $(this).attr("src",url+"?wmode=transparent");
  });
});

Answer 4

For those who are using jQueryUI, I came up with the following solution.

Add the following function and call it from the open event of your dialogs. If your browser is IE it will insert an iFrame into the Modal overlay or else add it to the dialog background.

// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");

// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
    setTimeout(function () {
        if (event && event.target && isIE) {
            var $dialog = $(event.target.parentElement);
            // Get the modal overlay if found.
            var $fixTarget = $dialog.next('.ui-widget-overlay');
            // Use the dialog body if there is no overlay.
            if (!$fixTarget || !$fixTarget.length)
                $fixTarget = $dialog;
            // Add as first child so it is covered by all of the other elements
            $fixTarget.prepend('<iframe class="iFrameFix" src="about:blank" style="position:absolute;top:0;left:0;width:100%;height:100%"></iframe>');
        }
    }, 10);
}

You would then call it as follows..

.dialog({
    open: function (event, ui) {
        dialogIFrameFix(event);
    }
});