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

Question

我使用iframe来显示pdf（asp.net mvc3）。虽然iframe菜单项中的PDF不可见，但意味着它隐藏在iframe后面。 任何人都可以让我知道如何解决这个问题。

提前致谢。

Answer 1

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

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

在CSS中使用z-index。

为iFrame提供ID，如下所示：

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

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

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

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

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

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

Answer 2

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

您可以将相对定位的父元素与绝对位置子元素一起用于菜单，弹出窗口以及您希望的内容。对于任何类型的iframe或窗口元素，这都是一个捕获所有解决方案。