将一个 iframe 覆盖在另一个 iframe 上

Question

我正在尝试通过 javascript 将一个 iframe 覆盖在另一个 iframe 上。

我想保持背景 iframe 的宽度和高度为 100%，但第二个 iframe 我希望它看起来稍微小一些，并位于第一个 iframe 的中心。

目前我正在尝试设置两个 iframe，如下所示，但这似乎不起作用..

<div id="iframe1" style="width=80%; height=50%;">
    <iframe id="gameIFrame" style="width=80%; height=50%;position:absolute;  z-index:1000;" seamless="seamless" src="http://www.guguncube.com" />
</div>

<div id="iframe2" style="width=30%; height=30%;" >
    <iframe id="gameIFrame2" style="width=30%; height=30%; position:absolute; " seamless="seamless" src="http://www.guguncube.com"/>
</div>

有什么想法吗？

Answer 1

是的，这是可以做到的，不是问题。这里的问题是，当您在frame1中加载frame2时，您需要使用

top and left

属性将其居中。

再次强调，不需要使用属性：

seamless and zindex

。

这是完整的代码：

<iframe id="gameIFrame1" style="width: 200px; height: 200px;   display: block; position: absolute;" src="http://www.guguncube.com">
</iframe>

<iframe id="gameIFrame2" style="width: 100px; height: 100px; top: 50px;    left: 50px;    display: block;    position: absolute;" src="http://www.guguncube.com">
</iframe>

在这里找到小提琴：

http://jsfiddle.net/cxbmu/1/，您显然可以在其中看到您期望的屏幕截图。

Answer 2

效果很好。

检查这个小提琴：http://jsfiddle.net/VFNUa/

您可能需要在 iframe 上指定：

display:block;

。另外，在执行

position:absolute;

时请仔细指定顶部/左侧位置

但请注意：重叠 iframe 可能不是一个好主意。 iframe 是窗口内的岛屿，重叠会降低可用性。

Answer 3

只想使用谷歌地图作为注册表单的背景。 在我看来，在全屏模式下使用地图的 iframe 小部件和其上的表单 iframe 是实现它的最简单的方法。 有人可以帮我将带有注册表单的 iframe 放在带有地图的 iframe 上吗？