Bagaimana untuk melaraskan margin atas elemen anak secara automatik berdasarkan ketinggian elemen induk?

Question

Saya menghadapi masalah dengan peperiksaan kolej lama. Pada asasnya ia memerlukan:

Dapatkan fail json ini

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

Buat fungsi yang melukis div segi empat sama dalam "utama" (elemen induk) menggunakan data yang terkandung dalam fail json.

Saiz div ialah: 10% x 10% daripada port pandangan; Kedudukan dan warna latar belakang ditentukan dalam fail json (kedudukan ialah peratusan berbanding saiz utama)

Saya telah melakukan segala-galanya, tetapi apabila saya menggunakan spesifikasi gaya pada div saya, margin-top adalah dalam peratusan berbanding lebar elemen induk... yang menyebabkan semua jenis isu limpahan

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

    });

}

Ini adalah fungsi saya, saya pasti ada perkara yang boleh saya lakukan untuk menjadikannya berfungsi, saya harap saya telah jelas dalam rumusan soalan saya

Answer 1

Ini ialah coretan sampel yang menunjukkan CSS yang digunakan untuk melukis div segi empat sama pada elemen induk. Dalam demo ini, saya telah menetapkan kedudukan dalam CSS, tetapi anda perlu menetapkannya dalam 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>