Iframe定位 [英] Iframe positioning

问题描述

这是Google翻译的iframe代码。

 < div id =contentframestyle =top：160px; left：0px;> 
< iframe src =/ translate_p？hl = en& amp; ie = UTF8& amp; prev = _t& amp; amp; sl = auto& amp; tl = en& amp; u = http：// yahoo .co.jp /& depth = 1& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; 0像素;底部：0像素;>&安培; LT; / DIV&安培; GT; 
< / iframe>< / div> 
  

我尝试使用相同的div和iframe标记做类似的事情，但是html页面并未结束像谷歌翻译。

 < div id =contentframestyle =top：160px; left：0px;> 
< iframe src =http://stackoverflow.comstyle =height：100％; width：100％; position：absolute; top：0px; bottom：0px;>& lt; / DIV&安培; GT; 
< / iframe>< / div> 
  

iframe出现在页面的顶部，而不是显示160px之后。

我不确定这里的代码与Google代码几乎相同。

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

解决方案

这是因为你' #contentframe

<$ p 位置：相对; $ p> < div id =contentframestyle =position：relative; top：160px; left：0px;>


position：absolute; 最近的祖先有一个位置，它不是静态。由于默认值是 static ，这就是导致你问题的原因。

This is iframe code of google translate.

<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>

I tried to do something similar with the same div and iframe tags but the html page does not end up like google translate.

<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>

The iframe appears right at the top of the page instead of appearing 160px later, as specified by the div.

I'm not sure what is wrong here with my code, which is almost the same as the Google code.

Edit: The adding of the position:relative to the tag is not suitable as a solution. It shrinks the div into a bar with a small height. It also means that the exact position of the with respect to the page cannot be specified as a result.

解决方案

It's because you're missing position:relative; on #contentframe

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

position:absolute; positions itself against the closest ancestor that has a position that is not static. Since the default is static that is what was causing your issue.

这篇关于Iframe定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！