Iframe positionnement

C'est 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 le même div et balises iframe, mais la page html n'a pas de fin 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 s'affiche à droite en haut de la page au lieu d'apparaître 160px plus tard, comme spécifié par la div.

Je ne suis pas sûr de ce qui est faux ici avec mon code, qui est presque le même que le code Google.

Edit:
L'ajout de la position:relative à la balise n'est pas comme une solution appropriée. Il réduit la taille des div dans un bar avec une petite hauteur. Cela signifie également que la position exacte de la avec le respect de la page ne peut pas être spécifié comme un résultat.

OriginalL'auteur John Tan | 2013-03-23

  1. 6

    C'est parce que vous êtes absent position:relative; sur #contentframe

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

    position:absolute; se positionne contre le plus proche de l'ancêtre qui a un position qui n'est pas static. Puisque le défaut est static qu'est ce qui a été à l'origine de votre problème.

    Savez-vous pourquoi Google Translate page ont pas le position:relative mais fonctionne toujours? Edit: Juste essayé de les mettre en position relative dans le <div>. Il ne fonctionne pas 🙁
    Je ne sais pas quelle est la part de Google Translate vous faites allusion, votre iframe est une partie de votre page et Google Translate est entièrement contenue et distincte de la vôtre.
    Google Translate est une page mise en œuvre par Google. Google Translate comme une page, n'a pas de position:relative dans le <div>. L'ajout de la position:relative provoque également la div à se rétrécir à un bar avec une petite hauteur.

    OriginalL'auteur Daniel Imms

  2. 3

    vous devez utiliser cette propriété css,

     position:relative;

    utiliser pour vos #contentframe balise div

    Jean déjà mentionné le fait que la position relative n'est pas comme une solution appropriée.

    OriginalL'auteur user2536752

  3. 2

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

    position:relative;

    à la balise div , il fonctionne ,

    OriginalL'auteur Anurag-Sharma

  4. 0

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

    Exemple:
    pour la première iframe utilisation:

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

    pour la deuxième iframe utilisation:

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

    OriginalL'auteur Subramonian Inian