親要素の高さに基づいて子要素の上マージンを自動的に調整するにはどうすればよいですか?

Question

私は古い大学の試験で問題に遭遇しました。 基本的に次のことを要求します:

この JSON ファイルを取得します

リーリー

json ファイルに含まれるデータを使用して、「main」(親要素) に正方形の div を描画する関数を作成します。

div のサイズは、ビューポートの 10% x 10% です。 位置と背景色は json ファイルで指定されます (位置はメインのサイズに対するパーセンテージです)

すべてを完了しましたが、スタイル仕様を div に適用すると、マージントップが親要素の幅に対するパーセンテージで表示されます...これにより、あらゆる種類のオーバーフローの問題が発生します

リーリー

これは私の役割です。それを機能させるために私にできることはあると思います。質問の表現が明確になっていれば幸いです。

Answer 1

これは、親要素に正方形の div を描画するために使用される CSS を示すサンプル スニペットです。このデモでは CSS で位置を設定しましたが、JavaScript で設定する必要があります。

リーリー リーリー