DIVs dynamisch übereinander stapeln

[marcel_m]

Hallo zusammen,

ich würde gerne in einem Eltern-DIV mehrere DIV-Childs einfügen. Dies soll später per JS passieren. Meine Frage dabei: wie schaff ich es, dass diese übereinander gestapelt werden? Die Ausrichtung vom ersten Element ist ja noch recht einfach, die Hürde dabei ist jedoch, dass ich den CSS Wert "bottom" dabei nicht umständlich über JS nachberechnen möchte.
Ideal wäre folgende Lösung: ich füge mittels JS ein Child-DIV ein und dieses setzt sich auf die bisherigen CHILD-DIVs, ohne eben den "Bottom" Wert mittels JS errechnen zu müssen.

(Später sollen DIV-Childs aus dem Stapel wieder rausgelöscht werden und das ist recht umständlich, alle bottom Werte der DIVs über dem rausgelöschten Element nachzuberechnen, da diese ja dann nach unten aufrücken müssen).

Ich hoffe, dass ich das Problem einigermaßen beschreiben konnte und würde mich über eine Rückmeldung freuen.

Viele Grüße
Marcel

 

[hela]

Hallo zusammen,
ich würde gerne in einem Eltern-DIV mehrere DIV-Childs einfügen. ... wie schaff ich es, dass diese übereinander gestapelt werden? ...

Hallo,

... indem du das Elternelement und die Kindelemente positioniertst, das Eleternelement "relative" und die Kindelemente "absolute".

... Die Ausrichtung vom ersten Element ist ja noch recht einfach, die Hürde dabei ist jedoch, dass ich den CSS Wert "bottom" dabei nicht umständlich über JS nachberechnen möchte ...

Keine Ahnung, was beides miteinander zu tun hat und wofür du das brauchst. Von welchem Element glaubst du dem "bottom"-Wert nachberechnen zu müssen?

 

[marcel_m]

Keine Ahnung, was beides miteinander zu tun hat und wofür du das brauchst. Von welchem Element glaubst du dem "bottom"-Wert nachberechnen zu müssen?

Vielen Dank für deine Antwort. Die relative / absolute Konstellation ist mir bewusst. Ich habe das mal kurz vereinfacht als Code zusammengestellt.

<div id="space" style="position: relative">
	<div style="position: absolute; bottom: 0px; height: 20px;">A</div>
	<div style="position: absolute; bottom: 20px; height: 20px">B</div>
	<div style="position: absolute; bottom: 40px; height: 20px">C</div>
</div>

Wenn ich hier jetzt "B" entfernen würde, müsste ich den Bottom-Wert von C anpassen, damit C direkt auf A anliegt. Das würde ich gerne vermeiden, ich brauche also eine lösung, die vom Gedanken her ohne den bottom-Wert zurecht kommt.

Viele Grüße
Marcel

 

[hela]

Hast du dein Beispiel schon mal ausprobiert? Wieso sollten die absolut positionierten Kindelemente alle übereinander liegen, du gibst ihnen ja per "bottom"-Wert eine unterschiedliche Position.

 

[marcel_m]

"Übereinander" ist vielleicht etwas missverständlich formuliert. Ich meine "aufeinander gestapelt".

 

[javaDeveloper2011]

Hi,

bei self HTML giebts zu z-index ein schönes Anzeigebeispiel.

Meinst du sowas?

 

[marcel_m]

[ DIV C ]
[ DIV B ]
[ DIV A ]
Zweidimensional aufeinander gestapelt (x/y Achse ohne z Achsen Betrachtung) wie Bauklötzchen, nicht wie Ebenen in Photoshop

 

[hela]

Das Rätselraten macht keinen Spaß, aber vermutlich soll es so aussehen:

<div style="position:relative; width:100px; height:100px; border:1px solid black;">
	<div style="float:left; position:absolute; bottom:0; overflow:hidden;">
		<div style="width:20px; height:20px; background-color:yellow">C</div>
		<div style="width:20px; height:20px; background-color:pink">B</div>
		<div style="width:20px; height:20px; background-color:lime">A</div>
	</div>
</div>

Dazu werden die "Bauklötzchen" in einen Hüllencontainer gesperrt, der in seinem Elternelement absolut am unteren Rand positioniert wird. Dieser Hüllencontainer wird außerdem gefloatet, damit er die Größe aller "Bauklötzchen" auch ohne expressive Größenangaben [shrink to fit] annimmt. Die "Bauklötzchen" selbst werden als statisch positionierte Blockelemente im normalen Elementfluss belassen.