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

Question

I cannot get a z-index working on an 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 smart alternative solution that you should consider, especially if you have problems with my approach or you don't like ugly hacks!

---

There is a way to cover window elements in IE with other elements, but you won't like it.

Background: window and windowless elements

In obsolete IE, elements are divided into two types: window and windowless.

Regular elements such as div and input have windows . They are displayed by the browser itself in the same MSHTML plane and correspond to each other in z-order.

Elements displayed outside of MSHTML are windowed ; for example, select (OS is displayed) and ActiveX controls. They respect each other in z-order, but occupy a separate MSHTML plane, which is drawn on top of all windowless elements.

The only exception is iframe . In IE 5, an iframe was a window element. This has been changed in IE 5.5 ; it is now a windowless element, but for backward compatibility reasons it will still draw over window elements with a lower z-index

In other words: the iframe takes into account the z-index for both window and windowless elements . If you are an iframe on a window element, all windowless elements located above the iframe will be visible!

What does it mean

PDF will always be drawn on top of regular page content - as select elements prior to IE 7 . The fix is ​​to place another iframe between your content and the PDF.

demonstration

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

The 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 finicky about its appearance in the DOM for other browsers, you can add it using JavaScript or wrap it in a conditional comment only for IE:

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

Answer 2

The workaround with the optional IFRAME works in simple cases, but I spent the morning trying to get an overlay to maintain transparency. In fact, our application has modal pop-ups, as a result of which a full-screen overlay behind the pop-ups is grayed out (black background, opacity 0.25) to indicate to the user that the pop-ups are modal. With a workaround, the inline PDF view never turns gray with the rest of the window, so it still looks “active” and you can really interact with the PDF viewer.

Our solution is to use the Mozilla pdf.js library: https://github.com/mozilla/pdf.js/ - embed an IFRAME pointing to the test URL http://mozilla.github.com/pdf.js/web/viewer .html? file = ressed.tracemonkey-pldi-09.pdf works right out of the box, observing the z-index, transparency, a lot, no hacks are required! It appears that they are using their own rendering engine, which generates standard HTML representing the contents of the PDF.

Answer 3

I tried to fix the same problem and my script was similar. I tried to display the video on YouTube, and at the top of the video I wanted to post some div with some information.

But the youtube video contained in the iframe did not allow me to do this. Regardless of the z-index I gave to the elements.

Then this post helped - stack overflow.site/questions/46969 / ...

This is mainly about wmode . Check the above record to find out how to work with it.

Here is the code from this post:

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

or

// Fix z-index embedding youtube video

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

Answer 4

For those using jQueryUI, I suggested the following solution.

Add the following function and call it from the opening event of your dialogs. If your browser is IE, it will insert the iFrame into the modal overlay or add it to the background of the dialog.

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