StaticとRelativeによる配置

positionプロパティは、要素をドキュメントフロー内でどのように配置するかを制御します。値は static、relative、absolute、fixed、sticky の5つです。

すべての要素のデフォルトは position: static です。static要素は通常のドキュメントフローに従います。ブロック要素は縦に積み重なり、インライン要素は左から右へ流れます。オフセットプロパティ（top、right、bottom、left）は効果を持ちません。

position: relative は要素を通常のフローに残したまま、top、right、bottom、left を使って本来の位置を基準にオフセットできるようにします。

position: relative とオフセットを使用すると、要素は見た目上移動しますが、元のレイアウト上のスペースは確保されたままです。他の要素がその空きを埋めることはありません。

オフセットプロパティは、基準点から要素を移動します。

• top：上端から下へ移動します
• left：左端から右へ移動します
• 負の値を指定すると方向が反転します

z-index はpositionが設定された要素（static以外）でのみ機能します。重なり順を制御する必要がある場合は、少なくとも position: relative を設定します。

position: relative の最も重要な用途は、オフセット値を指定しなくても、要素を絶対配置された子要素の包含ブロックにすることです。

position: relative と transform を組み合わせると、新しいスタッキングコンテキストが作成されます。要素はフロー内に残ったまま、見た目上変形できます。

すべての要素に position: relative を設定するのは避けてください。スタッキングコンテキストが作成され、z-indexの管理が複雑になることがあります。オフセットが必要な場合、または絶対配置された子要素の基準にする場合にのみ使用します。

relativeによる配置はレイアウトフローに影響しないため、視覚効果のために top/left を安全にアニメーションできます。ただし、transform: translate() をアニメーションさせるほうがパフォーマンスに優れています。

DevToolsでは、Computedパネルで有効な position の値を確認します。ボックスモデルの図には、適用されたオフセット座標が正確に表示されます。

position: relative; top: 20px を適用すると、要素のレイアウト上のスペースはどうなりますか。

position: static はデフォルトで、オフセットもスタッキングもありません。position: relative を使うと、要素自身の位置を基準にオフセットでき、レイアウト上のスペースが保持されます。最も重要な役割は、絶対配置された子要素の包含ブロックになることです。