z-index在IE中无法在iframe中使用pdf
我不能让一个包含IE8的PDF文件的iframe工作。 它适用于Google Chrome。
示例（ 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; }
有一种方法可以覆盖IE中的窗口元素与其他元素，但你不会喜欢它。
背景：窗户和无窗的元素
传统IE将元素分类为两种types：窗口式和无窗式。
像div和input常规元素是没有窗户的 。 它们由浏览器本身在单个MSHTML平面中呈现，并尊重彼此的z顺序。
在MSHTML之外渲染的元素被窗口化 ; 例如， select （由OS呈现）和ActiveX控件。 他们尊重彼此的z顺序，但占据了一个单独的MSHTML平面，被绘在所有无窗元素的顶部。
唯一的例外是iframe 。 在IE 5中， iframe是一个窗口元素。 这在IE 5.5中改变了 ; 它现在是一个没有窗口的元素，但为了向后兼容的原因，它仍然会绘制具有较低Z索引的窗口元素
换句话说： iframe尊重窗口元素和无窗口元素的z-index 。 如果将iframe放置在窗口元素上，则位于iframe上的任何无窗口元素都将可见！
这是什么意思
PDF将始终绘制在常规页面内容的顶部 – 就像select元素，直到IE 7 。 解决方法是在您的内容和PDF之间iframe另一个iframe 。
演示
jsFiddle： http : //jsfiddle.net/Jordan/gDuCE/
码
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; }
支持
这已经过testing，并应在IE 7-9中工作。 如果您对其他浏览器在DOM中出现的问题感到尴尬，可以将其添加到JavaScript中，或者将其包装在仅限IE的条件注释中：
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
我一直在试图解决同样的问题，我的情况是相似的。 我试图在我的页面上呈现一个YouTubevideo，并在video的顶部，我想放置一些div的一些信息。
但是，包含在iframe的youtubevideo不会让我这样做。 无论如何
z-index ，我给了元素。
然后这篇文章帮助 – https://stackoverflow.com/a/9074366/1484384
基本上是关于wmode 。 检查上面的post，看看如何使用它。
以下是该post的一些代码：
<iframe title="YouTube video player" width="480" height="390 src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent">
要么
//修复z-index YouTubevideoembedded
$(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); });
与额外的IFRAME的解决方法在简单的情况下工作，但我花了一个上午，试图让覆盖面尊重透明度。 基本上我们的应用程序具有模式popup窗口，popup窗口后面的全窗口叠加显示为“变灰”（背景颜色为黑色，不透明度为0.25），以向用户指示popup窗口是模态的。 有了解决方法，embedded式PDF视图永远不会与窗口的其余部分变灰，所以仍然看起来“活跃”，而且您仍然可以与PDF查看器交互。
我们的解决scheme是使用Mozilla的pdf.js库： https ： //github.com/mozilla/pdf.js/ – embedded指向testingURL的IFRAME http://mozilla.github.com/pdf.js/web/ viewer.html？文件= compressed.tracemonkey-pldi-09.pdf直接开箱即用的z-index，透明度，很多，不需要黑客！ 似乎他们使用自己的渲染引擎，它会生成代表PDF内容的标准HTML。
