9

这是谷歌翻译的 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 出现在页面顶部，而不是 div 指定的 160px 之后出现。

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

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

4

4 回答 4

7

那是因为你错过position:relative;了#contentframe

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

position:absolute;将自己定位在最接近的祖先中，该祖先具有positionthat is not static。由于默认设置是static导致您的问题的原因。

于 2013-03-23T14:24:15.197 回答
3

你必须使用这个 css 属性，

 position:relative;

将它用于您的#contentframe div 标签

于 2013-06-30T15:52:00.823 回答
2

尝试添加 css 样式属性

position:relative;

到 div 标签，它可以工作，

于 2013-03-23T14:57:03.173 回答
1

你应该使用位置：相对；对于一个 iframe 和位置：绝对；第二个；

示例：对于第一个 iframe 使用：

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

对于第二个 iframe 使用：

<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">
于 2016-08-08T15:59:11.217 回答