CSSのpositionプロパティの種類と違い

CSSのpositionプロパティについて

positionプロパティの種類

positionプロパティには以下の種類があります。

値	説明
position: static;（デフォルト）	通常のレイアウトで配置
position: relative;	通常のレイアウトからずらす位置を指定
position: absolute;	祖先要素からの位置を指定
position: fixed;	画面上での位置を指定
position: sticky;	祖先要素に吸着する位置を指定

position: static; は標準の位置に配置する

positionプロパティの初期値（positionプロパティを指定しなければposition: static;）なので指定することはほとんどありません。

position: relative;は標準の配置から位置をずらす

position: relative;は指定した要素だけに影響して、その後の要素の位置は通常フローに戻ります。

position: absolute;は祖先要素からの位置を指定する

position: absolute;を指定した要素は通常フローとは別に指定した位置に表示します。

直近の位置指定された祖先要素からの位置になる

位置指定されたとは、position: static;以外の要素という意味で、position: relative;などが指定された要素になります。

position: absolute;を指定した要素のtop,right,bottom,leftの位置は、位置指定された祖先要素が基準になります。

位置指定された祖先要素が無い場合は、画面の左上が基準となります。

position: absolute;を指定した要素は通常フローから離れるため、ボックス１とボックス３の間にボックス２のスペースはできません。

position: fixed; は常に画面の固定位置に表示する

position: fixed;は通常フローとは別に指定した位置に常に固定して表示します。

常に固定して表示されるため画面をスクロールしても固定位置に残り続けます。

position: sticky; は包含ブロックに吸着する

position: sticky;は通常フローの位置を基準にして、直近のスクロールする包含ブロックからの相対位置を指定します。