9

グーグル翻訳の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 翻訳のようにはなりません。

<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 で指定されているように、160 ピクセル後に表示されるのではなく、ページの上部に表示されます。

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

編集: position:relative をタグに追加することは、解決策としては適していません。div を高さの小さいバーに縮小します。また、結果として、ページに対する の正確な位置を指定できないことも意味します。

4

4 に答える 4

7

それはあなたが見逃しposition:relative;ているからです#contentframe

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

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

于 2013-03-23T14:24:15.197 に答える
2

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

position:relative;

divタグに、それは機能します、

于 2013-03-23T14:57:03.173 に答える
1

position: relative; を使用する必要があります。1 つの iframe と position:absolute; 第二に;

例: 最初の iframe の使用:

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

2 番目の iframe の使用:

<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">
于 2016-08-08T15:59:11.217 に答える