Iframe-Positionierung
Dies ist der iframe-Code von Google Translate.
<div id="contentframe" style="top: 160px; left: 0px;">
<iframe src="/translate_p?hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://yahoo.co.jp/&depth=1&usg=ALkJrhjrVT6Mc1tnruB-zgrtu9cyQ1bSeA" name="c" frameborder="0" style="height:100%;width:100%;position:absolute;top:0px;bottom:0px;"></div>
</iframe></div>
Ich habe versucht, etwas Ähnliches mit den gleichen div- und iframe-Tags zu machen, aber die HTML-Seite endet nicht wie 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;"></div>
</iframe></div>
Der iframe wird oben auf der Seite angezeigt und nicht 160px später, wie durch das div angegeben.
Ich bin mir nicht sicher, was hier mit meinem Code falsch ist, der fast dem Google-Code entspricht.
Edit: Das Hinzufügen der Position: relativ zum Tag ist nicht als Lösung geeignet. Es schrumpft das Div in eine Bar mit geringer Höhe. Dies bedeutet auch, dass die exakte Position der Seite in Bezug auf die Seite nicht als Ergebnis angegeben werden kann.
Es liegt daran, dass Sie position:relative; in #contentframe fehlen.
<div id="contentframe" style="position:relative; top: 160px; left: 0px;">
position:absolute; positioniert sich gegen den nächsten Vorfahren, der eine position hat, die nicht static ist. Da der Standardwert static ist, hat dies zu Ihrem Problem geführt.
sie müssen diese CSS-Eigenschaft verwenden,
position:relative;
verwenden Sie es für Ihr #contentframe-Div-Tag
Versuchen Sie, die CSS-Stileigenschaft hinzuzufügen
position:relative;
zum div-Tag funktioniert es,
sie sollten Position verwenden: relativ; für einen iframe und eine position: absolut; für die zweite;
Beispiel: Für die erste Verwendung von iframe:
<div id="contentframe" style="position:relative; top: 100px; left: 50px;">
für den zweiten iframe Gebrauch:
<div id="contentframe" style="position:absolute; top: 0px; left: 690px;">