Question

我无法让z-index处理包含带有IE8的pdf文件的iframe。它适用于谷歌浏览器。

示例（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

你应该考虑

更新： Matthew Wise has a really clever alternative solution - 特别是如果你的方法有问题或不喜欢丑陋的黑客攻击！

有一种方法可以在IE中用其他元素覆盖窗口元素，但你不会喜欢它。

背景：窗口和无窗口元素

Legacy IE将元素分为两种类型：windowed和windowless。

div和input等常规元素无窗口。它们由浏览器本身在单个MSHTML平面中呈现，并且尊重彼此的z顺序。

在MSHTML之外呈现的元素加窗;例如，select（由OS呈现）和ActiveX控件。他们尊重彼此的z顺序，但占据了一个单独的MSHTML平面，该平面绘制在所有无窗元素之上。

唯一的例外是iframe。在IE 5中，iframe是一个窗口元素。这是changed in IE 5.5;它现在是一个无窗口的元素，但出于向后兼容的原因，它仍将绘制具有较低z-index的窗口元素

换句话说： iframe尊重窗口和无窗口元素的z-index 。如果您将iframe放在窗口元素上，那么位于iframe上方的任何无窗口元素都将可见！

这意味着什么

PDF将始终绘制在常规页面内容之上 - 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的条件注释中：



Answer 2

我一直在尝试解决同样的问题，我的情况类似。我试图在我的页面上呈现YouTube视频，在视频的顶部，我想要为div添加一些信息。

但是包含在iframe中的YouTube视频并没有让我这样做。不论我给予元素的z-index。

然后这篇文章帮助了 - https://stackoverflow.com/a/9074366/1484384

基本上是关于wmode。检查上面的帖子，了解如何使用它。

以下是该帖子的一些代码：

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

或者

//修复z-index youtube视频嵌入

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

Answer 3

对于那些使用jQueryUI的人，我想出了以下解决方案。

添加以下函数，并从对话框的open事件中调用它。如果您的浏览器是IE，则会将iFrame插入到Modal叠加层中，或者将其添加到对话框背景中。

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

然后您将其称为如下。

.dialog({
    open: function (event, ui) {
        dialogIFrameFix(event);
    }
});

z-index在iframe中使用pdf的Internet Explorer中不起作用

3 个答案:

背景：窗口和无窗口元素

这意味着什么

演示

代码

支持