Javascript 如果一个iframe具有外部（不同域）内容，如何将div定位到两个iframe上？_Javascript_Ajax_Iframe_Html

Javascript 如果一个iframe具有外部（不同域）内容，如何将div定位到两个iframe上？

javascript ajax iframe html

Javascript 如果一个iframe具有外部（不同域）内容，如何将div定位到两个iframe上？,javascript,ajax,iframe,html,Javascript,Ajax,Iframe,Html,我正在寻找一种方法，将div（它将是一个弹出窗口，由用户悬停和/或单击类似lightbox的内容来激活）放置在拆分iframe上，其中顶部iframe是来自我的服务器的内容，底部iframe是来自另一个服务器的内容。像这样： ---------------------------------------- | | | Upper | |

我正在寻找一种方法，将div（它将是一个弹出窗口，由用户悬停和/或单击类似lightbox的内容来激活）放置在拆分iframe上，其中顶部iframe是来自我的服务器的内容，底部iframe是来自另一个服务器的内容。像这样：

---------------------------------------- | | | Upper | | | | ------------------- | | | DIV | | --------- -------| | | | | | -------------------- | | | | Lower | | | ---------------------------------------- ---------------------------------------- | | |上层| | | | ------------------- | ||分区|| --------- -------| | | | | | -------------------- | | | |降低| | | ---------------------------------------- 基本上，它看起来像一个在顶部（上部）和底部（下部；外部内容）之间水平分割的盒子，以及一个悬停在两者上方的DIV，因此顶部和底部都有重叠

顺便说一句，我还发布了另一个问题：ajax与外部内容的iFrame，以及在本例中应该使用什么。因此，根据答案，较低的（外部内容）不一定是iframe。

您最好的选择是确保将样式设置为：

.overlapper
{
    position: absolute;
    z-index: 9000;  /* some very high value to ensure its always on top */
    top: 50px; /* whatever positioning you need */
    left: 50px;
    width: 500px;
    height: 100px;
}

只要将你的价值观设定为你所需要的。需要注意的主要是z指数，较高的值表示其在层顺序中较高，0或1为最低值

一些需要注意的事情；如果绝对位置不利于布局，您也可以将位置设置为“位置：相对”；在这种情况下，您可能需要使用负的顶部值将其拖回第一个iframe的顶部。

请查看以下内容：

这个页面几乎满足了您的要求。我会尽量避免使用z指数，因为一旦你沿着这条路走下去，你就会以一种可能会让人痛苦的方式坚持下去

（正如你所知，我在Firefox3和IE6中测试了这一点）

这里是代码-我对#pop div有两条规则，第一条规则是纯粹的表示，第二条规则是使整个工作正常的定位样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            iframe { width:500px; height:200px; }
            #pop { width:400px; height:300px; background:#ff9; }
            #pop { position:absolute; top:50px; left:50px; }
        </style>
    </head>
    <body>
        <div id="pop">this is the popup</div>   
        <div>
            <iframe src="content.html"></iframe>
        </div>
        <div>
            <iframe src="http://www.google.com"></iframe>
        </div>
    </body>
</html>


测验
iframe{宽度：500px；高度：200px；}
#弹出{宽度：400px；高度：300px；背景：#ff9；}
#pop{位置：绝对；顶部：50px；左侧：50px；}
这是弹出窗口

在Safari 3中不能一直工作。弹出的div是“分割”的，大约在外部帧开始的位置有一厘米的水平距离。