web-dev-qa-db-fra.com

Positionnement Iframe

C'est le code iframe de 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>

J'ai essayé de faire quelque chose de similaire avec les mêmes balises div et iframe mais la page html ne se termine pas comme 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>

L'iframe apparaît juste en haut de la page au lieu d'apparaître 160px plus tard, comme spécifié par le div.

Je ne suis pas sûr de ce qui ne va pas ici avec mon code, qui est presque identique à celui de Google.

Edit: L'ajout de la position: par rapport à la balise n'est pas une solution appropriée. Il réduit la div en une barre avec une petite hauteur. Cela signifie également que la position exacte du par rapport à la page ne peut pas être spécifiée en conséquence.

htmliframepositioncss-position
9
John Tan

C'est parce qu'il vous manque position:relative; sur #contentframe

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

position:absolute; se positionne par rapport à l'ancêtre le plus proche ayant une position qui n'est pas static. Puisque la valeur par défaut est static, c’est ce qui a causé votre problème.

6
Daniel Imms

vous devez utiliser cette propriété css,

 position:relative;

utilisez-le pour votre balise #contentframe div 

3
user2536752

Essayez d'ajouter la propriété de style css 

position:relative;

à la balise div, ça marche,

2
Anurag-Sharma

vous devriez utiliser position: relative; pour un iframe et position: absolute; pour le second;

Exemple: Pour la première utilisation d'iframe:

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

pour une deuxième utilisation d'iframe:

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