Html iframe 定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15587823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe positioning
提问by John Tan
This is iframe code of google translate.
这是谷歌翻译的 iframe 代码。
<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="/translate_p?hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://yahoo.co.jp/&depth=1&usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;"></div>
</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 和 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;"></div>
</iframe></div>
The iframe appears right at the top of the page instead of appearing 160px later, as specified by the div.
iframe 出现在页面顶部，而不是出现在 160 像素之后，如 div 所指定的那样。
I'm not sure what is wrong here with my code, which is almost the same as the Google code.
我不确定我的代码有什么问题，这与 Google 代码几乎相同。
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.
编辑：添加位置：相对于标签不适合作为解决方案。它将 div 缩小为一个高度较小的条形。这也意味着无法指定 相对于页面的确切位置。
回答by Daniel Imms
It's because you're missing position:relative;on #contentframe
那是因为你错过position:relative;了#contentframe
<div id="contentframe" style="position:relative; top: 160px; left: 0px;">
position:absolute;positions itself against the closest ancestor that has a positionthat is not static. Since the default is staticthat is what was causing your issue.
position:absolute;将自己定位于最近的祖先，它的position不是static。由于默认值是static导致您出现问题的原因。
回答by user2536752
you have to use this css property,
你必须使用这个 css 属性，
position:relative;
use it for your #contentframe div tag
将它用于您的 #contentframe div 标签
回答by Anurag-Sharma
Try adding the css style property
尝试添加 css 样式属性
position:relative;
to the div tag , it works ,
到 div 标签，它有效，
回答by Subramonian Inian
you should use position: relative; for one iframe and position:absolute; for the second;
你应该使用位置：相对；对于一个 iframe 和位置：绝对；第二个；
Example: for first iframe use:
示例：对于第一个 iframe 使用：
<div id="contentframe" style="position:relative; top: 100px; left: 50px;">
for second iframe use:
对于第二个 iframe 使用：
<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">
