Comment ajuster automatiquement la marge supérieure des éléments enfants en fonction de la hauteur de l'élément parent ?

Question

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

Answer 1

Ceci est un exemple d'extrait montrant le CSS utilisé pour dessiner un div carré sur un élément parent. Dans cette démo, j'ai défini la position en CSS, mais vous devrez la définir en JavaScript.

div {
  height: 300px;
  width: 300px;
  background: gray;
}
div div {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background: orange;
}

<div>A<div>B</div></div>