Iframe positioning

9

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.

This question is tagged with html iframe position css-position

~ Asked on 2013-03-23 14:22:43

The Best Answer is


7

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.

~ Answered on 2013-03-23 14:24:15


3

you have to use this css property,

 position:relative;

use it for your #contentframe div tag

~ Answered on 2013-06-30 15:52:00


Most Viewed Questions: