我不能得到z索引工作在包含与IE8的pdf文件的iframe。它与谷歌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将元素分为两种类型：窗口化和无窗口化。像div和input这样的常规元素是无窗口的，由MSHTML引擎直接呈现。然而，窗口元素在单独的MSHTML平面中呈现，并且被绘制在为它们保留的空间中侵入的任何元素上。他们尊重z-index彼此，但总是在无窗口元素的顶部。
此规则的唯一例外是iframe。在IE 5中，iframe是一个窗口元素。这是changed in IE 5.5;它现在是一个无窗口元素，但是为了向后兼容性原因，它仍然会绘制具有较低z-index的窗口元素。至关重要的是，它也遵循无窗口元素的z-index – 所以如果你在一个窗口元素上放置一个iframe，你在iframe上的任何无窗口元素将是可见的。
这意味着什么
基本上，PDF被绘制在常规页面content-like select elements were until IE 7的顶部。最简单的解决方法是使用位于您的内容和PDF之间的另一个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;
}
这已经过测试，应该在IE 7-9中工作。如果您对其他浏览器在DOM中显示的效果感到难以置信，您可以使用JavaScript添加它或将其包装在仅限IE的条件注释中：
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
