Question

我正在尝试构建一个简单的HTML测试，其中iframe覆盖主HTML中的元素，因此它不会被显示。我将iframe配置为100％的高度和宽度，但似乎主HTML仍然在页面中查看它的元素。

这是HTML的主要内容：

<HTML>
<HEAD>
<style>
html, body, iframe {
margin:0; /* remove any margins of the IFrame and the body tag */
padding:0;
height:100%; /* set height 100% so that it fills the entire view port*/
}

.iframe {
 height: 100%;
 width: 100%;
}
.main {
height: 100%;
width: 100%;
position:absolute;
z-index:10000000;
}
</style>
</HEAD>
<BODY>
<div class=main>
<iframe src="iframe.html" width=100% height=100%></iframe>
</div>
<p>Test is after the iframe</p>
</body>
</HTML>

我希望＆＃34;测试是在iframe＆＃34;之后文本不显示，因为它应该在占据100％页面的iframe下面。

目前的截图：

Answer 1

如果您想在当前页面内容“上方”放置一个iframe，您可以使用z-index并将iframe定位为绝对值，如下所示。

position: absolute;
z-index: 9999;

另一种选择（可能看起来更好并提供更多控制）将使用诸如lightbox或fancybox（JS libs）之类的东西。这将允许您动态控制html的覆盖方式，并允许您将iframe代码放在每个实例中，从而提供更多控制。

Answer 2

首先，摆脱iframe周围的div，因为这不是必需的。

<iframe src="iframe.html"></iframe>
<p>Test is after the iframe</p>

这样就可以设置iframe的样式，使其覆盖整个页面。请注意，CSS选择器中的.之前没有iframe。 border: none非常重要，否则iframe内容将超出可见区域。

iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: none;
}

请在此处查看示例：https://jsfiddle.net/c875zwda/

主要html以上的iframe

2 个答案: