Why Doesn\'t z-index Work with PDFs in iFrames in Internet Explorer?

z-index Doesn't Work in IE with PDF in an iFrame

In Internet Explorer (IE), attempting to utilize z-index on an iFrame containing a PDF may result in unexpected behavior. Despite working seamlessly in other browsers like Chrome, IE users encounter difficulties.

To understand this issue, we need to delve into the concept of "windowed" and "windowless" elements in IE. Windowed elements, such as ActiveX controls and select dropdowns, are rendered outside of the browser's main MSHTML plane. In contrast, windowless elements, like divs and input fields, are rendered within this plane.

Windowed vs. Windowless Element Interactions

Crucially, windowed elements always take precedence over windowless elements, regardless of z-index. This is where the problem with iFrames containing PDFs arises. In IE, PDFs are treated as windowed elements, meaning they will always appear on top of windowless elements, even if the latter have a higher z-index.

The Solution: A Fix Using Another iFrame

Unfortunately, there is no straightforward fix to this issue. However, a workaround can be achieved by introducing another iFrame between the PDF and the page content. This "cover" iFrame has a negative z-index, ensuring that it remains hidden from view. By blocking the overflow of the PDF, it allows normal z-index behavior to apply to the main page content, allowing text or other elements to appear on top of the PDF.

Implementation Details

The following code outlines the solution:

HTML:

<code class="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></code>

CSS:

<code class="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;
}</code>

Conclusion

By utilizing another iFrame with a negative z-index, we effectively create a barrier between the PDF and the page content. This workaround allows for expected z-index behavior, enabling text or other elements to appear on top of the PDF in IE. While this solution is not ideal, it provides a means to address the z-index issue in IE.

The above is the detailed content of Why Doesn\'t z-index Work with PDFs in iFrames in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!