positionでボックスの配置方法を指定する【CSS】

positionプロパティは、ボックスの配置方法を指定するプロパティで、相対位置か絶対位置かなどを決めます。

{position: 配置方法;}

後述するtop、right、bottom、leftプロパティを組み合わせて具体的な位置を選択します。

値の指定方法

positionプロパティでは、以下のような値を指定することができます。

staticを指定すると、ボックスの配置方法は指定されず、top、right、bottom、leftは適用されません。

relativeを指定すると、通常表示される位置を基準にした距離で位置を指定する相対配置になります。

absoluteを指定すると、ブラウザの表示領域の左上端を基準にした絶対配置になりますが、親ボックスにpositionプロパティのstatic以外の値が指定されている場合は、親ボックスの左上端を基準にした絶対配置になります。

fixedを指定すると、ブラウザの表示領域の左上端を基準にした絶対配置になります。

ただし、absoluteと異なり、ウィンドウをスクロールしても位置が固定されたままで、移動しません。

top、right、bottom、leftプロパティは、positionプロパティでstatic以外の値を指定した場合に、ボックスを配置する位置を指定します。

{top: 位置;}
{right: 位置;}
{bottom: 位置;}
{left: 位置;}

autoを指定すると、ブラウザによって自動的に指定されますが、%値やpxなどの単位つき数値で指定することができます。

%値は親ブロックの幅、高さに対する割合となります。