配置: relative、absolute、fixed、sticky

デフォルトでは、要素は通常のドキュメントフローに従います。ブロック要素は垂直方向に積み重なり、インライン要素はテキスト内で水平方向に流れます。positionプロパティを使うと、このフローから外れてオーバーレイ、固定ヘッダー、ツールチップなどを作成できます。

すべての要素はposition: staticから始まります。これは、通常のドキュメントフローによって配置されることを意味します。top、right、bottom、leftプロパティは、static要素には効果がありません。

position: relativeは要素を通常のフローに残したまま、top、right、bottom、leftを使って元の位置からずらすことを可能にします。重要なのは、絶対位置指定された子孫要素のための位置決めコンテキストを作成することです。

position: absolute は要素を通常のフローから外します。最も近い位置指定された祖先要素（static 以外の position が設定された要素）を基準に配置されます。位置指定された祖先要素がない場合は、ビューポートを基準にします。

位置指定された要素は重なり合うことがあります。z-index を使って重なり順を制御します。z-index が大きいほど上に表示されます。位置指定された要素（static 以外）でのみ機能し、新しいスタッキングコンテキストを作成します。

position: fixed は要素を通常のフローから外し、ビューポートに固定します。ページをスクロールしても一緒に移動しません。固定ヘッダー、フローティングアクションボタン、Cookie バナーなどに最適です。

position: sticky はハイブリッドな配置方法です。要素はしきい値（top または bottom で設定）に達するまでページと一緒にスクロールし、その後は固定されます。長いテーブルのセクション見出しや、ヘッダーを通過した後も固定されるサイドバーなどに便利です。

古典的な手法です。position: absolute; top: 50%; left: 50% と transform: translate(-50%, -50%) を組み合わせると、位置指定された親要素内で要素を正確に中央揃えできます。

absolute で位置指定された子要素は、デフォルトでは親要素の範囲からはみ出すことがあります。親要素に overflow: hidden を追加すると、ボックスの外側にある部分を切り取れます。カード画像のエフェクトやバッジの切り抜きに便利です。

一部のプロパティは意図せずスタッキングコンテキストを作成します。たとえば transform、filter、isolation: isolate です。その結果、z-index が 9999 の要素でも、より低いスタッキングコンテキストの内側にあるため別の要素の背後に表示されるなど、z-index の競合が起こることがあります。

relative: オフセットや位置指定コンテキストに使います。absolute: 親要素を基準にしたバッジ、ツールチップ、オーバーレイに使います。fixed: 常に表示するヘッダー、モーダル、トーストに使います。sticky: セクション見出しや、スクロールに追従するサイドバーナビゲーションに使います。レイアウトには position を使わず、Flex または Grid を使ってください。

ある要素に position: absolute; top: 0; right: 0; が設定されています。親要素に position: relative が設定されている場合、どこに表示されますか？

static はデフォルトです。relative は通常のフローから外れずに位置をずらし、位置指定コンテキストを作成します。absolute は通常のフローから外れ、最も近い位置指定された祖先要素を基準に配置されます。fixed はビューポートに固定されます。sticky はスクロールした後に固定されます。重なり順の制御には z-index を使います。