CSSのpositionプロパティ解説
CSS の position プロパティは、要素の配置方法を指定するために使用されます。position プロパティには、static、relative、absolute、fixed という 4 つの値があります。以下に、これら 4 つの値について詳しく説明します。
- 静止：staticはpositionプロパティの初期値であり、要素は通常のドキュメントの流れに沿って配置されます。要素の位置はtop、right、bottom、leftの各プロパティによって確定しますが、これらプロパティは静止配置の要素には何の影響も及ぼしません。
- 相対配置は、要素を元の位置に対して配置する方法です。top、right、bottom、left の各プロパティを設定することで、要素の位置をオフセットできます。相対配置された要素は元のスペースを占有し続けており、他の要素は元の位置に基づいてレイアウトされます。
- 絶対位置：要素をその直近の非静的な配置要素に対して位置付けます。非静的な配置要素がない場合は、`body`要素に対して位置付けます。 `top`、`right`、`bottom`、`left`プロパティを設定することで、要素の位置を正確に制御できます。絶対的に配置された要素は、元の場所を占有しなくなり、他の要素がその残したスペースを補充します。
- 固定（こてい）配置は、要素がブラウザーウィンドウに対する位置を基に配置される仕組みです。要素をウィンドウ内の位置に固定するには、top、right、bottom、leftプロパティの設定を行います。固定配置の要素は、ページのスクロールに連動して移動しません。
指定した4つの値に加え、positionプロパティにはstickyという値があります。sticky配置とは、スクロール可能なコンテナー（親要素またはwindow对象）に対する配置のことです。ページが特定のしきい値までスクロールされると、要素は指定した位置に固定されます。スクロール可能なコンテナーがそのしきい値を超えてスクロールすると、要素は通常の配置方法に戻ります。
要約：positionプロパティは要素の配置に利用され、top、right、bottom、leftプロパティにより要素の位置を調整できます。目的に応じてpositionの値を選択することで、必要な効果を実現できます。
