Ich hatte ein Problem mit einer alten College-Prüfung. Grundsätzlich erfordert es:

Holen Sie sich diese JSON-Datei

[
    {"colore": "#FF0080", "pos_orizz": 10, "pos_vert": 30},
    {"colore": "#800080", "pos_orizz": 30, "pos_vert": 40},
    {"colore": "#808000", "pos_orizz": 50, "pos_vert": 50},
    {"colore": "#408080", "pos_orizz": 60, "pos_vert": 60},
    {"colore": "#C0C0C0", "pos_orizz": 30, "pos_vert": 50}
]

Erstellen Sie eine Funktion, die mithilfe der in der JSON-Datei enthaltenen Daten ein quadratisches Div in „main“ (übergeordnetes Element) zeichnet.

Die Größe des Div beträgt: 10 % x 10 % des Ansichtsfensters; Position und Hintergrundfarbe werden in der JSON-Datei angegeben (Position ist ein Prozentsatz im Verhältnis zur Größe der Hauptdatei)

Ich habe alles getan, aber wenn ich eine Stilspezifikation auf mein Div anwende, ist der obere Rand ein Prozentsatz im Verhältnis zur Breite des übergeordneten Elements ... was alle möglichen Überlaufprobleme verursacht

async function crea(){

    const response = await MyFetch();
    
    const main = document.querySelector("main");

    response.forEach(element => {

        let div = document.createElement("div");

        div.style.width = "10vh";
        div.style.height = "10vh";
        div.style.backgroundColor = element.colore;
        **div.style.marginTop  = element.pos_vert+"%";**
        div.style.marginLeft  = element.pos_orizz+"%";

        main.appendChild(div);

    });

}

Das ist meine Funktion, ich bin mir sicher, dass ich einiges tun kann, damit es funktioniert. Ich hoffe, ich habe die Frage klar formuliert