【React初心者メモ】relativeとabsolute

relative クラス

要素を通常の文書の流れに従って配置しつつ、位置を調整するための基準点として機能します。使用方法としては、親要素に relative クラスを適用することで、その子要素の absolute 配置の基準となります。

absolute クラス

要素を通常の文書の流れから取り除き、最も近い relative またはそれ以外の位置指定がされた親要素を基準に配置します。使用方法としては、子要素に absolute クラスを適用し、top-0, left-0 などの位置指定クラスを組み合わせて配置を調整します。

具体例：親要素の左上に子要素を配置

以下の例では、親要素に relative クラスを適用し、子要素に absolute クラスと位置指定クラスを適用しています。

<div class="relative w-64 h-64 bg-gray-200">
  <div class="absolute top-0 left-0 w-16 h-16 bg-blue-500">
    子要素
  </div>
</div>

このコードでは、親要素（灰色のボックス）の左上に、子要素（青色のボックス）が配置されます。親要素に relative クラスを適用することで、子要素のabsolute 配置の基準となります。