如何根據父元素高度自動調整子元素的上邊距？

Question

我在一次老的大學考試中遇到了問題。 基本上它要求：

取得這個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}
]

建立一個函數，使用json檔案中包含的數據，在「main」（父元素）中繪製正方形div。

div的尺寸為：視窗的10% x 10%; 位置和背景顏色在json檔案中指定（位置是相對於main的大小的百分比）

我已經做了一切，但是當我給我的div應用樣式規格時，margin-top的百分比是相對於父元素的寬度...這導致了各種溢出問題

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

    });

}

這就是我的函數，我確信有些事情我可以做來使其工作，我希望我在問題的闡述上已經清楚了

Answer 1

這是一個範例片段，展示了在父元素上繪製正方形div所使用的CSS。在這個示範中，我已經在CSS中設定了位置，但你需要在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>