Absolute配置とContaining Block

絶対配置された要素は通常のドキュメントフローから除外されます。他の要素からは、その要素が存在しないかのように扱われます。最も近いposition指定済みの祖先要素を基準に配置されます。

絶対配置された要素の包含ブロックは、position の値が static 以外である最も近い祖先要素です。そのような祖先要素がない場合、要素は初期包含ブロック（ビューポート）を基準に配置されます。

最も一般的なパターンは、親要素に position: relative を追加して、絶対配置された子要素をその中に収めることです。

絶対配置では、top/right/bottom/left は包含ブロックのパディング端から測定されます。

絶対配置された要素を中央揃えにする古典的なテクニックです。

絶対配置された要素は、デフォルトではコンテンツに合わせて縮みます（widthやheightを設定した場合を除きます）。ブロック要素のようにコンテナの幅いっぱいに広がることはありません。

4つの端すべてを0に設定すると、絶対配置された要素が包含ブロックいっぱいに広がります。

insetプロパティは、top、right、bottom、leftをまとめて指定するショートハンドです。

絶対配置された要素はスタッキングコンテキストに参加します。z-index を使って、重なった絶対配置要素のどれを上に表示するかを制御します。

親要素に position: relative を追加し忘れると、絶対配置された子要素は、すでにpositionが設定されている最も近い祖先要素を基準に配置されます。その祖先要素は、多くの場合ビューポートです。必ず包含ブロックを確認してください。

flexまたはgridコンテナは、自動的にposition指定済みの要素になるわけではありません。絶対配置された子要素の包含ブロックにするには、明示的に position: relative を追加する必要があります。

どの祖先要素にも static 以外の position が設定されていない場合、絶対配置された要素はどこを基準に配置されますか。

絶対配置された要素はドキュメントフローから外れ、最も近いstatic以外の祖先要素を基準に配置されます。配置を制御するには、親要素に必ず position: relative を追加します。inset: 0 を使用すると、絶対配置された要素をコンテナいっぱいに広げられます。