Kind Element positionieren und Eltern Element passt sich entsprechend an

[ebody]

Hallo,

#box 1 ist 200px breit und 100px hoch.

#box2 ist 50px breit/hoch.

<div id="box1">
 <div id="box2"></div>
</div>

Relevant ist, wo #box 2 genau platziert wird. Ist es mit CSS möglich, dass man #box2 positioniert und sich #box1 dann entsprechend anpasst?

Gruß ebody

[Gunnar Bittersmann]

@@ebody

Kannst du dein Problem so beschreiben, dass verständlich wird, was du eigentlich wissen willst?

LLAP 🖖

[Felix Riesterer]

Liebe(r) ebody,

Relevant ist, wo #box 2 genau platziert wird.

warum? Wo wird sie denn genau platziert?

Ist es mit CSS möglich, dass man #box2 positioniert

Ja, klar!

und sich #box1 dann entsprechend anpasst?

Inwiefern "entsprechend"? Was genau soll sich an #box1 verändern?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo ebody,

die Grundsatzfrage ist: wenn die Abmessungen bekannt sind, und die relative Position von Box1 zu Box2, was spricht dann dagegen dass Du die Positionierung an Box1 festmachst?

Aber wenn du's unbedingt an box2 festmachen willst, dann würde ich Dir folgende Fake-Lösung zum Vorschlag machen. Ob das für deine Verhältnisse nützlich ist, weiß ich nicht. Du schreibst ja nichts darüber.

<div id="box2">
 <div id="box1"></div>
</div>

#box2 {
  position: absolute;
  top: 170px; left: 225px;
  width: 50px; height:50px;
  background-color: red;
}

#box1 {
  position: absolute;
  top: -25px; left: -75px;
  width: 200px; height: 100px;
  background-color: #aaf;
  z-index: -1;
}

Rolf

[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

[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

[Matthias Apsel]

Hallo Matthias Scharwies,

ja, die Frage ist, was will @ebody wirklich erreichen.

Bis demnächst
Matthias

[Rolf B]

Hallo ebody,

oha. Von draggable war bisher keine Rede.

Inwieweit ist dein Muster der Realität nahe? Insbesondere:

(1) brauchst Du den 5px Rand um die grüne Box? (2) ist die grüne Box tatsächlich einfarbig?

Wenn (1)=nein und (2)=ja, könnte man die Rahmenbox auch mittels Box-Shadow simulieren:

  box-shadow: -10px  0   0 15px rgba(49, 217, 0, 1),
               70px  0   0 15px rgba(49, 217, 0, 1),
              110px  0   0 15px rgba(49, 217, 0, 1),
              -10px 20px 0 15px rgba(49, 217, 0, 1),
               50px 20px 0 15px rgba(49, 217, 0, 1),
              110px 20px 0 15px rgba(49, 217, 0, 1);

Mit diesen 6 Schattenteilen bekommst Du genau die 200x100 Pixel Box um die rote Box herum, ohne Rand. Den schwarzen Rand bekommt man mit 6 zusätzlichen schwarzen Schatten und geschickter Positionierung auch noch hin, aber das artet dann schon in Overkill aus.

Nachtrag: gerade noch mit einer ::before Box gespielt, in der Hoffnung, dass jQuery die nicht als ziehbares Kind erkennt - war aber nix 😕

Rolf

[Linuchs]

Ich habe das mal kurz ausprobiert und meine, eine Lösung sei mit „statischem“ CSS allein nicht möglich.

Wenn die umgebende #box1 irgendwo positioniert werden soll, braucht sie position:absolute, dann aber kann #box2 nur absolut zur Elter-Box positioniert werden, also nicht frei.

Mit Javascript vielleicht einmalig (habe ich nicht getestet), wenn der Zeitpunkt der Positionierung von #box2 eingefangen werden kann.

Dann kann #box1 die Eigenschaft position:absolute zugeteilt und an die richtige Position gerückt werden. Position #box2 verschiebt sich und muss neu berechnet werden.

Linuchs