CSSである要素を他の要素に対して相対的に配置する

質問

4つの div を別のものに相対的に配置したい。 私は、矩形の div があり、そこに4つの div を挿入したい。 CSSに属性 "position:relative" という属性があることは知っていますが、これはその要素の通常の位置からの相対的なものです。 私は div を通常の位置ではなく、別の要素（矩形）に対して相対的に配置したいのです。どうすればよいでしょうか。

どのように解決するのですか？

position: absolute は要素の位置を座標で指定します。 最も近い位置にある祖先 に対して相対的な座標で要素を配置します。 position: static .

4 つの div がターゲット div の内部にネストされるようにし、ターゲット div に position: relative とし position: absolute を使います。

このようにHTMLを構成します。

<div id="container">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div>

そして、このCSSが動作するはずです。

#container {
  position: relative;
}

#container > * {
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

...