position:absolute ohne fixe Höhe

[harnisch]

Hallo,

ist es irgendwie möglich den allgemeinen 'Seitenfluss' zu erhalten, wenn ich zwei Bilder mit position:absolute übereinander lege, ohne dem wrapper-div eine fest Höhe zuzuweisen?

In meinem konkreten Beispiel ist es so, dass wenn ich dem wrapper-div nicht die fixe Höhe von 300 Pixeln zuweise, der zweite <p>-Paragraph unter die Bilder rutscht. Kann man das irgendwie vermeiden?

Ist die Herangehensweise falsch? Habt ihr einen besseren Vorschlag?

Vielen Dank im Vorraus!

<div style="width: 500px; margin: 0 auto;">

	<div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></div>
	
	<div style="position:relative; height: 300px;">

		<div style="position:absolute;">
			<img src="img/img_hintergrund.gif" width="500" height="300"/>
		</div>
			
		
		<div style="position:absolute; top: 10px; left: 10px;">
			<img src="img/img_vordergrund.gif" width="480" height="280"/>
		</div>
	
	</div>
	
	<div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p></div>
	
</div>

 

[Efchen]

Nein, wenn Du etwas absolut positionierst, ist es unwiderruflich aus dem Textfluss genommen.
Wozu brauchst Du hier die relative bzw. absolute Positionierung? Reicht nicht float?
Wozu positionierst Du relativ, wenn Du keine relative Lage festlegst? Damit nimmst Du das Element aus dem Fluss, ohne dass Du was davon hast.
Was hast Du eigentlich vor? Nur zwei Bilder übereinander anzeigen?
Und, wenn das Image "hintergrund" heißt, ist es nur Zierde? Dann bindet man es eh nicht mit <img> ein, denn es enthält ja keinen Content.
Also ich finde Deinen Code verwirrend.

Warum packst Du eigentlich alles nochmal in ein <div>? <div> ist dazu da, eine Gruppe von mindestens zwei Elementen auszuzeichnen. Dein erstes, Dein drittes, viertes und fünftes div können alle weg. Lediglich das relativ positionierte schließt wirklich eine Gruppe ein.