web-dev-qa-db-ja.com

Iframeの位置決め

これは、Google Translateの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ページは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>

Iframeは、divで指定されているように、160px後に表示される代わりに、ページの上部に表示されます。

私のコードのどこが間違っているのかわかりませんが、これはGoogleのコードとほとんど同じです。

編集：position：relativeをタグに追加することは、ソリューションとして適切ではありません。 divを縮小して高さの低いバーにします。また、ページに対するの正確な位置を結果として指定できないことも意味します。

htmliframepositioncss-position
9
John Tan

position:relative;の#contentframeがないためです

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

position:absolute;は、positionではないstaticを持つ最も近い先祖に対して自分自身を配置します。デフォルトはstaticであるため、これが問題の原因でした。

6
Daniel Imms

このCSSプロパティを使用する必要があります

 position:relative;

#contentframe divタグに使用します

3
user2536752

CSSスタイルプロパティを追加してみてください

position:relative;

divタグに、それは動作します、

2
Anurag-Sharma

position：relative;を使用する必要があります。 1つのiframeとposition：absolute; 2番目の

例：最初のiframeの使用：

<div id="contentframe" style="position:relative; top: 100px; left: 50px;">

2番目のiframeの使用：

<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">
0
Subramonian Inian