Einem neu erzeugtem Button eine bestimmte Position zuweisen

[webity]

Hallo Gunnar,

PS: Das Beispiel verwendet aktuelles CSS mit :has(), mathematischen Funktionen, Container-Einheiten, Nesting – all das, wovon sogenannte „Frontend-Entwickler“ noch nie gehört haben.

Ich bin nicht mal ein „Frontend-Entwickler“. Ich bin Anfänger und habe geglaubt etwas zu wissen. 😀

Bei diesem Beispiel:

https://codepen.io/gunnarbittersmann/pen/mdazbJQ

& mit diesem Zeichen wird die Baumstruktur abgebildet - Ein Element enthält ein anderes.

Mit der Zeile:

&:has(button:nth-of-type(1):last-of-type) { --count: 1 }

wird ermittelt, wie viele button vorrhanden sind und die Variable count dementsprechend gesetzt.

dann stehen da Angaben zu dem button (Aussehen etc.) dann werden der Winkel, der Radius und die x, y Verschiebung berechnet.

1. Frage: die Anzahl der Button soll sich ja ändern, muss ich also den
   Selektor :has() sooft einsetzen / schreiben, wie die maximale Anzahl an Button habe?

2. Was mir noch nicht klar ist, es wird ein Button konfiguriert, es werden Berechnungen angestellt und am Ende werden den Buttons den Index zugeteilt. Wie greift da die Berechnung? AH - jetzt: zu jedem Button dem ein Index zugewiesen wird , gehören auch die Werte, Berechnungen etc. und so kann alles berechnet werden. Richtig?

3. Wie funktioniert das mit dem Translate? Wo ist der Anfangspunkt?

   Ich habe es vom Div Mitte = Kreismittelpunkt in px berechnet. Aber in Deinem Beispiel ist mir das ein bisschen unklar.

Ich weiß noch nicht welche Version ich verwende, Rolf seine Tipps setzte ich gerade um und räume ein bisschen auf. Beides interessiert mich.

Gruß

Lars