Embedding PDFs or other content into websites and web apps has become commonplace. Inevitably you will want to have menus that drop down over those PDFs or have some other element that can overlay the iframe that you place the PDF in.

Most browsers understand this desire and are happy to accommodate. Unfortunately, Internet Explorer in its many versions still does not handle this.

The Problem

IE renders an iframe over the rest of the content so that your other elements end up behind the PDF. This is especially troublesome for drop down menus like below.

Dropdown before loading iframe

Dropdown after loading iframe

The Solution

Other sites go on about positioning and z-indexes, but that is not going to solve your problem. The answer is a one line fix.

You must insert an empty iframe next to the element that needs to be on top of the real iframe. That’s all – see the example below if it sounds odd.

For whatever reason, adding multiple iframes forces IE to stack them properly and respect the z-indexes. This has been tested in IE 7, 8, 9, and 10.

Solid Tip: Check out this JS Fiddle in Internet Explorer to see it in action!

Update 05/24/2016: The JS Fiddle no longer loads the PDF in Internet Explorer. Here is an alternate test page I loaded up here at SolidlyStated.

The Example

HTML5view code
<div id="container">
    <div id="menu">place some content here that goes over the div</div>
    <iframe id="fake" src="about:blank"></iframe>
</div>
<iframe id="pdf" src="http://stlab.adobe.com/wiki/images/d/d3/Test.pdf" width="400" height="200"></iframe>