Kind Element positionieren und Eltern Element passt sich entsprechend an

[ebody]

Hallo Rolf und alle anderen,

sorry erstmal, ich dachte meine Beschreibung würde so ausreichen. Ich habe hier https://codepen.io/ebody/pen/VwYLLBK die Lösung von Rolf verwendet.

Die rote und grüne Box sollen optisch ein "Objekt" bilden. Die Position der roten Box ist relevant, die umgebende grüne Box bewegt sich entsprechend immer mit. Wie gesagt, ein Objekt welches die Position ändert. Mir fällt gerade einfach nichts anderes ein, wie ich es beschreiben soll.

Dieses Objekt liegt innerhalb einer anderen Box, in diesem Beispiel <main>, unten rechts in der Ecke. Verändert man die Größe von <main> soll die rote Box seine alte Position an die neuen Maße von <main> anpassen. Vorher war es rechts unten, jetzt müsste sie rechts/oben sein (wenn man davon ausgeht, dass <main> -90° gedreht wird). Das "Objekt" (rote und grüne Box) soll sich nicht mit drehen.

Ohne diese Lösung müsste man viel mehr rechnen, es ist einfacher die rote Box (eine Art Ankerpunkt) positionieren zu können. Das Beispiel hier https://codepen.io/ebody/pen/VwYLLBK funktioniert noch nicht so 100%, aber hoffe, dass es hilft diesen Beitrag besser zu verstehen.

Gruß ebody