Iframe定位

2018-07-02 06:04:03

这是谷歌翻译的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。

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

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

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

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

position:absolute; 将自己置于最不具有static position的最接近的祖先身上。由于默认值是static ，这就是导致问题的原因。

你必须使用这个CSS属性，

 position:relative;

将它用于#contentframe div标记

尝试添加CSS样式属性

position:relative;

到div标签，它的工作原理，

链接地址: http://www.djcxy.com/p/89909.html

上一篇: Iframe positioning

下一篇: why can't you use iframe absolute positioning to set height/width