Wie kann der obere Rand untergeordneter Elemente automatisch an die Höhe des übergeordneten Elements angepasst werden?

Question

Ich hatte ein Problem mit einer alten College-Prüfung. Grundsätzlich erfordert es:

Holen Sie sich diese JSON-Datei

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

Erstellen Sie eine Funktion, die mithilfe der in der JSON-Datei enthaltenen Daten ein quadratisches Div in „main“ (übergeordnetes Element) zeichnet.

Die Größe des Div beträgt: 10 % x 10 % des Ansichtsfensters; Position und Hintergrundfarbe werden in der JSON-Datei angegeben (Position ist ein Prozentsatz im Verhältnis zur Größe der Hauptdatei)

Ich habe alles getan, aber wenn ich eine Stilspezifikation auf mein Div anwende, ist der obere Rand ein Prozentsatz im Verhältnis zur Breite des übergeordneten Elements ... was alle möglichen Überlaufprobleme verursacht

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

    });

}

Das ist meine Funktion, ich bin mir sicher, dass ich einiges tun kann, damit es funktioniert. Ich hoffe, ich habe die Frage klar formuliert

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>