はじめに

こんにちは、エンジニア2年目の嶋田です。
まずは、この記事を開いていただきありがとうございます！

CSSを使って要素を配置するとき、どちらのポジショニング方法を使えばいいのか迷ったことはありませんか？
CSSのpositionプロパティを使って、要素の位置を自由に指定することができ、実現できる事が増えます！
この記事では、それぞれの使い方と使用例を解説します。
私自身、absoluteとrelativeがわからなくなってしまうことがあるので備忘録としてアウトプットすることにしました！
なるべくわかりやすくまとめるので、よかったら最後までお付き合いください😄

目次

CSSのpositionプロパティとは
- positionプロパティの基本概念
- positionとセットで使うtop,bottom,left,right
staticの特徴
relativeの特徴
- relativeの使い方
absoluteの特徴
- absoluteの使い方
fixedの特徴
- fixedの使い方
最後に

CSSのpositionプロパティとは

CSSのpositionプロパティは、要素を配置する際に使用される重要なプロパティの1つです。
このプロパティを使うことで、要素の位置を自由に指定できます。positionプロパティは、要素を通常のドキュメントフローから取り除いたり、特定の位置に配置したりするのに役立ちます。

positionプロパティの基本概念

positionプロパティは、要素の配置方法を指定するために使用されます。
例えば、要素の位置を20pxだけ右に動かすというようなことができたり、要素の上に別の要素を重ねてのせることができたり、また画面の決まった位置に要素を固定して表示させることができたりします。

主な使い方は以下の通りです。

セレクタ {position : 値}

セレクタって何…？となった方はCSSの基本をまとめた記事があるのでこちらも是非！

static:初期値(指定することはほとんどないと思います…)
relative:現在の位置を基準に相対的な位置を決める
absolute:親要素を基準に絶対的な位置を決める
fixed:画面の決まった位置に固定する

たとえば、class名が”test”の要素の相対的な位置を指定したいときには、.test {position: relative}というように書きます！

positionとセットで使うtop,bottom,left,right

positionとセットで使うtop , right , bottom , left の各プロパティが、配置された要素の最終的な位置を決めます。

位置を指定する流れは以下の通りです。

positonで基準を決める
top , right , bottom , left で具体的な位置を数字で調整

top：基準の上からの距離
bottom：下からの距離
left：左からの距離
right：右からの距離

基準の上からの距離を10pxにしたいときは.test {top: 10px}というように書きます！
基本的には上記4つのうち縦方向と横方向の2つを組み合わせて使います。
leftとright、またはtopとbottomを同時に指定することはほとんどありません。

※ ちなみにtopとbottomを同時に0に指定すると要素は縦いっぱいに広がり、leftとrightを同時に0にすると要素は横いっぱいに広がります。

staticの特徴

staticの主な特徴は以下の4点です。

初期値：CSSで何も指定していなければstaticで指定している位置と同じになっている
要素は通常の位置：上下左右に動かすことができない
要素の位置を調整できない：topやleftなどを指定しても効かない
z-indexを指定できない：要素の重なり順を変えられない

staticは「静的な」という意味です。
positionの初期値がstaticなので基本的にstaticを指定することはないと思います。
ただ、positionをリセットしたい時などには使えます！使います！

relativeの特徴

relativeは「相対的な」という意味です。
position: relativeは現在の表示位置から相対的に要素の位置を動かしたいときに使います。
要素から相対的に位置指定をしたい場合、その要素に対してrelativeを設定します。
position:relativeと指定しても、topやbottomを指定しなければstaticと同じ位置に表示されます。

relativeの使い方

See the Pen css-relative by shimada (@tusegela-the-sasster) on CodePen.

本来の表示位置を基準とし、上から10px（top:10px）、左から10px（left:10px）分、移動しました！

absoluteの特徴

absoluteは「絶対的な」という意味です。
position: absolute単体では基本的に使いません。
主にposition: relativeや、fixedと一緒に使用します。
要素がどんな形でも、間に他の要素や余白が入っていても、その位置に配置してくれるので使い方を覚えておくと幅がぐっと広がります！

absoluteの使い方

指定しない場合は以下です。

See the Pen css-absolutenone by shimada (@tusegela-the-sasster) on CodePen.

次に、要素②をabsoluteにした場合です。

See the Pen css-absolute2 by shimada (@tusegela-the-sasster) on CodePen.

左上にきちんと表示されていますね！
bottom:0とright:0と指定すれば、親要素の右下にピッタリとくっつきます。
他の要素があろうと重なって表示されるところから見ても、absoluteは絶対的な位置指定であるということがわかると思います。
absoluteを使って位置調整するときは、親要素にposition:relative（もしくはfixed）を指定しておきましょう。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、親要素もセットで指定するように覚えておきましょう。
画像に文字を重ねたかったりする時にすごく使えるのでぜひ！

fixedの特徴

fixedは画面から見た位置で要素を固定させたい時に使用する値です。
例えば、スクロールしても位置が変わらないメニューバーやソーシャルボタンを表示したいときに使うと便利です。
absoluteと指定方法がほとんど同じですが、位置の基準は親要素ではなく「ウィンドウ全体」です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。

fixedの使い方

See the Pen css-fixed by shimada (@tusegela-the-sasster) on CodePen.

スクロールしても常に上側に要素を固定することができました。
このように何かを固定するときにfixedは使えます、使います！

最後に

最後までお付き合いいただき、ありがとうございます。
コードを入れて視覚的にもわかりやすくなるように意識してみました。
少しでもお役に立てていたら幸いです！

私自身、まだまだ勉強中ですので何か誤った情報がありましたらお手数おかけしますがコメントにて教えていただけると大変ありがたいです。よろしくお願いいたします。

今後とも、インプットとアウトプットを繰り返し精進していきます！

参考文献