如何基于父元素高度设置子元素的margin-top？

兄弟我太懂你踩的这个CSS坑了！你遇到的问题其实是CSS里一个容易被忽略的规则：margin的百分比值（不管是margin-top还是margin-bottom），都是相对于父元素的宽度来计算的，而不是高度！这就是为什么你用element.pos_vert+"%"设置margin-top时，垂直位置完全不符合预期，甚至出现溢出的原因。

针对你的需求（pos_vert是基于父元素main的高度百分比，pos_orizz是基于宽度百分比），有个简单直接的解决方案——用绝对定位来替代margin定位，具体修改如下：

首先，给你的父元素main设置相对定位，这样子元素的绝对定位会以main为参考（如果main本身没有明确高度，记得给它设置高度，比如height: 100vh适配视口）：

main {
  position: relative;
  height: 100vh;
}

然后修改你的JavaScript代码，把margin换成绝对定位的top和left：

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;
    
    // 替换margin为绝对定位，完美匹配你的位置规则
    div.style.position = "absolute";
    div.style.top = element.pos_vert + "%";
    div.style.left = element.pos_orizz + "%";
    
    main.appendChild(div);
  });
}

为什么这个方法能解决问题？因为绝对定位的top属性百分比是基于父元素的高度计算的，left是基于父元素的宽度计算的，完全贴合你JSON数据里的位置定义。

如果你不想用绝对定位，也可以尝试用CSS Grid或Flexbox结合calc计算，但绝对定位是最直接适配你需求的方案。

备注：内容来源于stack exchange，提问作者AndMas