How to automatically adjust the top margin of child elements based on the parent element's height?

Question

I ran into a problem on an old college exam. Basically it asks for:

Get this json file

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

Create a function that draws a square div in "main" (parent element) using the data contained in the json file.

The size of the div is: 10% x 10% of the viewport; The position and background color are specified in the json file (position is a percentage relative to the size of main)

I've done everything, but when I apply a style spec to my div, the margin-top is in percentage relative to the parent element's width... which causes all kinds of overflow issues

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

    });

}

This is my function, I'm sure there are things I can do to make it work, I hope I've been clear in my formulation of the question

Answer 1

This is a sample snippet showing the CSS used to draw a square div on a parent element. In this demo, I've set the position in CSS, but you'll need to set it in 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>