在 Internet Explorer 中的 iframe 中的 PDF 上定位元素时，为什么 z-index 不起作用？

z-index Internet Explorer 中 iframe 中的 PDF 问题

尽管使用 z-index 控制 HTML 的堆叠顺序很容易元素，有时会在特定浏览器中遇到问题。当尝试在包含 PDF 文件的 iframe 上定位元素时，Internet Explorer 中会出现这样的问题。

IE 中的窗口元素与无窗口元素

了解此问题，了解 Internet Explorer 如何对 HTML 元素进行分类至关重要。它将它们分为两种类型：

• 无窗口元素：像 div 和 input 这样的元素是无窗口的，由浏览器在单个 MSHTML 平面中呈现并遵循 z-index 顺序.
• 窗口元素： 像 select 和 ActiveX 控件这样的元素在 MSHTML 外部呈现，并存在于绘制在无窗口元素上的单独平面中，无论 z-index 为何。

IE 中的 Iframe 异常

历史上，iframe 是窗口元素，但这种情况在 IE 5.5 中发生了变化。虽然现在无窗口，但 iframe 仍然保留在具有较低 z-index 的窗口元素上绘制的行为，以实现向后兼容性。

解决 z-index 问题

在对于 iframe 中的 PDF 的特定情况，由于其窗口特性，PDF 将始终呈现在常规页面内容之上。要解决此问题，必须在页面内容和 PDF iframe 之间放置一个额外的 iframe。这个额外的 iframe 充当“封面”，确保无窗口元素可以定位在 PDF 上。

代码示例

这里是演示解决方案的修改后的代码示例:

<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>

<code class="css">#outer {
    ...
    z-index: 2;
}

.cover {
    ...
    z-index: -1;
}

#pdf {
    ...
    z-index: 1;
}</code>

结论

通过使用额外的“cover”iframe，可以强制元素在 Internet 中的 iframe 中显示在 PDF 上Explorer，即使 z-index 最初看起来无效。此解决方法提供了针对特定 Internet Explorer 行为的解决方案，并确保维持预期的堆叠顺序。

以上是在 Internet Explorer 中的 iframe 中的 PDF 上定位元素时，为什么 z-index 不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！