iframe 定位答案

【问题标题】：Iframe positioningiframe 定位
【发布时间】：2013-03-13 08:11:45
【问题描述】：

这是谷歌翻译的 iframe 代码。

<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="/translate_p?hl=en&amp;ie=UTF8&amp;prev=_t&amp;sl=auto&amp;tl=en&amp;u=http://yahoo.co.jp/&amp;depth=1&amp;usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt;
</iframe></div>

我尝试使用相同的 div 和 iframe 标签做类似的事情，但 html 页面最终不像谷歌翻译。

<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="http://stackoverflow.com" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;">&lt;/div&gt;
</iframe></div>

iframe 出现在页面顶部，而不是 160 像素后出现，由 div 指定。

我不确定我的代码有什么问题，这与 Google 代码几乎相同。

编辑：位置：相对于标签的添加不适合作为解决方案。它将 div 缩小为一个高度较小的条形图。这也意味着无法指定相对于页面的确切位置。

【问题讨论】：

标签： html iframe position css-position

【解决方案1】：

这是因为您在#contentframe 上缺少position:relative;

<div id="contentframe" style="position:relative; top: 160px; left: 0px;">

position:absolute; 将自己定位在最接近的具有position 而不是static 的祖先。由于默认值为static，这就是导致您的问题的原因。

【讨论】：

你知道为什么谷歌翻译的页面没有 position:relative 但仍然有效吗？编辑：刚刚尝试将 position:relative 放在
中。它不起作用:(
我不确定您指的是 Google 翻译的哪一部分，您的 iframe 是您页面的一部分，而 Google 翻译完全包含在您的页面中，并且与您的页面是分开的。
谷歌翻译是谷歌实现的一个页面。谷歌翻译作为一个页面，在
中没有 position:relative。添加 position:relative 也会导致 div 缩小为高度较小的条形。

【解决方案2】：

你必须使用这个 css 属性，

 position:relative;

将它用于您的#contentframe div 标签

【讨论】：

John 已经提到相对位置不适合作为解决方案。

【解决方案3】：

尝试添加css样式属性

position:relative;

到 div 标签，它可以工作，

【讨论】：

【解决方案4】：

你应该使用 position: relative;对于一个 iframe 和位置：绝对；第二个；

示例：首次使用 iframe：

<div id="contentframe" style="position:relative; top: 100px; left: 50px;">

第二次使用 iframe：

<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">

【讨论】：