我在一次老的大学考试中遇到了问题。 基本上它要求：
获取这个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);
});
}
这就是我的函数，我确信有些事情我可以做来使其工作，我希望我在问题的阐述上已经清楚了
这是一个示例片段，展示了在父元素上绘制正方形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; }