如何将 div 放置在两个 iframe 上，其中一个 iframe 具有外部（不同域）内容？
Posted
技术标签:
【中文标题】如何将 div 放置在两个 iframe 上，其中一个 iframe 具有外部（不同域）内容？【英文标题】：How can I position a div over two iframes where one iframe has external (different domain) content? 【发布时间】：2010-09-27 19:34:10 【问题描述】：我正在寻找一种方法来将 div（它将是一个弹出窗口，由用户悬停和/或单击很像灯箱来激活）在一个拆分 iframe 上，其中顶部 iframe 是我的内容服务器和底部的 iframe 是来自另一台服务器的内容。像这样：
-------------------------------------- | | |鞋面 | | | | ------------------- | | |分区 | | --------- --------| | | | | | -------------------- | | | |降低 | | | --------------------------------------基本上，它看起来像一个在顶部（上部）和底部（下部；外部内容）之间水平拆分的框，以及一个悬停在两者上方的 DIV，因此顶部和底部都有重叠。
顺便说一句，我还发布了另一个问题：ajax 与 iframe 的外部内容以及在这种情况下我应该使用什么。因此，较低的（外部内容）不一定必须是 iframe，具体取决于答案。
【问题讨论】：
【参考方案1】：看看这个：
http://ahare.us/test.html
此页面几乎可以满足您的要求。我会尽量避免使用 z-index，因为一旦你走上这条路，你就会以可能会变得痛苦的方式致力于它。
（你知道我在 Firefox 3 和 IE 6 中测试过这个）。
这里是代码 - 我有两个规则用于#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>
【讨论】：
在 Safari 3 中无法一直工作。弹出的 div 被“拆分”，在外部框架开始的位置水平大约有一厘米。【参考方案2】：最好的办法是确保将样式设置为：
.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-index，值越高意味着其在层顺序中越高，0 或 1 是最低的。
一些注意事项；您可以将您的位置设置为“位置：相对；”如果绝对定位不利于布局，在这种情况下，您可能需要使用负顶部值将其拖回第一个 iframe 的顶部。
【讨论】：
以上是关于如何将 div 放置在两个 iframe 上，其中一个 iframe 具有外部（不同域）内容？的主要内容，如果未能解决你的问题，请参考以下文章