Kind Element positionieren und Eltern Element passt sich entsprechend an

[Matthias Scharwies]

Servus!

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.

Wenn ich Deinen CodePen (https://codepen.io/ebody/pen/VwYLLBK ) richtig verstehe, soll die rote Box rechts unten fext (oder absolut) positioniert werden. Dann würde ich, wie schon von Rolf vorgeschlagen, das main-Element positionieren und abhängig von den Größen mit media queries dann die rote und grüne Box.

Wenn in die Box(en) kein oder nur wenig Text soll, würde ich dort ein Pseudoelement mit ::after verwenden.

Aber anscheinend habe ich es doch nicht richtig verstanden:

Wie gesagt, ein Objekt welches die Position ändert. Mir fällt gerade einfach nichts anderes ein, wie ich es beschreiben soll.

... 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).

Und das würde mich jetzt brennend interessieren. Im responsiven Webdesign verschiebt sich main auf die jeweils verfügbare Breite.

• Welchen Anwendungsfall hast du da?
  • Wieso sollte sich das um 90°drehen?
  • Verläuft der Text innerhalb von main dann auch von oben nach unten?

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.

Herzliche Grüße

Matthias Scharwies