HTML/CSS CSS position:relative IE Problem

[skred]

Hallo, ich habe folgenden code:

<div style="height:400px; width:400px; background-color:lightgrey">
        <div style="width:300px; height:300px; background-color:green">DIV1</div>
	<div style="width:300px; height:200px; position:relative; left:50px; top:-300px; background-color:yellow">DIV2</div>
height:400px
</div>

So sieht das aus:
https://62.75.165.214/test.html

Wenn ich das im Firefox betrachte, behält das äußere DIV-Feld seine höhe von 400px, da es ja theoretisch nicht größer werden muss, wenn ich das untere feld hochschiebe. So hätte ich das gerne.
wenn ich es jedoch im IE8 betrachte, ist das äußere DIV-Feld 500px (300+200) hoch, obwohl DIV2 nach oben geschoben wird. Das ist nich schön

Wie kann ich es so machen, dass es im IE8 (und möglichst überall anders) so aussieht, wie im FF?

Vielen Dank für die Hilfe,
skred

 

[TerraTux]

<div style="height:400px; position:absolute; width:400px; background-color:lightgrey">
	<div style="width:300px; height:300px; background-color:green">DIV1</div>
	<div style="width:300px; height:200px; position:[COLOR="red"]absolute[/COLOR]; left:50px; top:[COLOR="Red"]0[/COLOR]px; background-color:yellow">DIV2</div>
height:400px
</div>

So sieht's im IE8 aus, wie es sein soll...

Wenn Du ein Objekt per top/left/right/bottom ausrichten willst, muss es "absolut" sein. "relative" bezieht sich immer auf das vorhergehende Element innerhalb eines Block-Elements.

 

[Astrodan]

Ich versteh nicht ganz was dein Problem ist, vor allem da es bei mir in Opera und IE zumindest gleich aussieht, und mir auch generell mit relative und verwandten kein Problem bekannt ist.
Vorschlag: Mach mal nen Screenshot wie es ist und wie es sein soll..

[...]
Wenn Du ein Objekt per top/left/right/bottom ausrichten willst, muss es "absolut" sein. "relative" bezieht sich immer auf das vorhergehende Element innerhalb eines Block-Elements.

Das stimmt so doch gar nicht!
top/bottom/.. lässt sich genauso (und durchaus auch sinnvoll) auf relative anwenden, dafür gibt es das Attribut ja eben.
Und es orientiert sich nicht am vorhergehenden Element, sondern verschiebt das Element relativ zu der Position, wo es sich eigentlich befinden würde, wenn es mit position: static (also dem Standard) positioniert wäre.
In so fern habe ich Zweifel, dass eine absolute Positionierung hier wirklich die Lösung des Problems ist.

 

[skred]

Vielen Dank TerraTux, durch benutzen von position:absolute statt position:relative konnte ich das Problem lösen, dass sich das DIV-Feld vergrößert.

 

[tobomator]

https://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Einfach mal dort anschauen und nachlesen !