iframe - 当 iframe 包含 PDF 时，菜单项隐藏在 iframe 后面

Question

我正在使用 iframe 显示 pdf(asp.net mvc3)。虽然 PDF 在 iframe 菜单项中不可见，但意味着它隐藏在 iframe 后面。谁能让我知道如何解决这个问题。

提前致谢。

score 1 · Accepted Answer

您的问题非常简单，请详细说明。

但是，这里有一个解决方案：

在 CSS 中使用 z-index。

给 iFrame 一个 ID，如下所示：

<iframe id="pdf-display"></iframe>

还以类似的方式为菜单项指定一个 ID，例如id="menu-item". 如果您有多个其他菜单项，请将它们包含在 a 中<div>并给 div 一个 ID。

然后，在单独的样式表或<style>标签中，输入以下代码：

iframe#pdf-display {
    position: relative;
    z-index: 9;
}

#menu-item {
    position: relative;
    z-index: 10;
}

通过将菜单项的 z-index 增加一，它可以将元素放置在 iFrame 的“上方”，可以这么说。z-index 越高，元素越靠近“前”。

score 1 · Accepted Answer

实际上，对于父框架内容隐藏在子 iframe 内容后面的所有 iframe 问题的有效解决方案是在要显示在 iframe 上方的元素上使用绝对定位。

您可以将相对定位的父元素与绝对位置的子元素一起用于菜单、弹出框和您想要的任何东西。这是适用于任何类型的 iframe 或窗口元素的包罗万象的解决方案。

2 回答 2