iframe定位

Question

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

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

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

Answer 1

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

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

position:absolute;定位本身不会有最近的祖先position,是不是static.由于默认值是static导致您的问题的原因.