Question

这是google翻译的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页面最终不会像Google翻译一样。

<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显示在页面顶部，而不是显示160px之后，由div指定。

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

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

Answer 1

这是因为您在position:relative;

上缺少#contentframe

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

position:absolute;将自己定位于position不是static的最近祖先。由于默认值为static，因此导致您的问题。

Answer 2

你必须使用这个css属性，

 position:relative;

将它用于#contentframe div标签

Answer 3

尝试添加css样式属性

position:relative;

到div标签，它可以工作，

Answer 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;">

iframe定位

4 个答案: