J'ai eu un problème avec un ancien examen universitaire. En gros, cela nécessite :

Obtenez ce fichier json

[
    {"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}
]

Créez une fonction qui dessine un div carré dans "main" (élément parent) en utilisant les données contenues dans le fichier json.

La taille du div est : 10 % x 10 % de la fenêtre d'affichage ; La position et la couleur d'arrière-plan sont spécifiées dans le fichier json (la position est un pourcentage par rapport à la taille du principal)

J'ai tout fait, mais lorsque j'applique une spécification de style à mon div, la marge supérieure est en pourcentage par rapport à la largeur de l'élément parent... ce qui provoque toutes sortes de problèmes de débordement

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

    });

}

C'est ma fonction, je suis sûr qu'il y a des choses que je peux faire pour que cela fonctionne, j'espère avoir été clair dans ma formulation de la question