【CSS positionプロパティ】absoluteとrelativeの違いを分かりやすく解説
こんにちは、ゆうきです。
CSSを記述するときにpositionプロパティを利用して、要素の位置をずらすことがあります。
そのときに出てくるのが「absolute（絶対位置）」「relative（相対位置）」です。
今回は実際に配置した例を見て、「absolute」と「relative」の違いについて説明していきます。
positionプロパティとは
まずは、「absolute」「relative」を使ううえで欠かせないpositionプロパティについても説明します。
positionプロパティは、「要素を配置する基準」を指定するためのプロパティです。「absolute」と「relative」はこの「基準」の場所を区別するためにあるということを理解していると、この先の説明もわかりやすく感じると思います。
absoluteとは
「absolute」は移動するときの基準がウィンドウ、または親要素になります。
つまり複数の要素がある場合でも「absolute」で指定すると、他の要素を無視して左上（top:0、left:0の位置）から移動するということです。
実際に配置した例を見ていきましょう。200px×100pxのboxを３つ並べました。
次に、黄色のbox2に{ position: absolute; top:150px; left:100px } を指定します。
すると、box2はウィンドウの左上を基準（起点）にして、上から150px、左から100pxの位置に移動しました。
さらに、absolute を指定した要素は高さがなくなり、浮いたような状態になるため、box3はbox2を無視して位置を詰めています。
relativeとは
relative は移動するときの基準が元いた位置になります。
つまりpositionを記述する前に配置されていた場所から移動するということです。
box2に、{ position: relative; top:150px; left:100px; } を指定した例を見ていきましょう。
box2は自分が元々いた位置を基準にして、上から150px、左から100pxの位置に移動しています。
また、absoluteとは違い、移動させた要素の高さが残るため、box3は位置を詰めずそのままの位置に表示されています。
absoluteとrelativeの使い方
実際にWebサイトを制作すると、親要素を基準にして子要素を移動させたいという場合が多いです。
しかし要素に空白を残したくないからと、子要素にだけ「absolute」を記述してしまうと、思ったように表示することができません。
これは、親要素ではなく画面左上を起点に子要素が移動してしまっているからです。
親要素を基準にするためには、親要素に「position:relative;」を記述します。
こうすることで、子要素が親要素を基準に移動することができます。
まとめ
「relative」と「absolute」は、最初は混乱するかもしれませんが、少しでも理解しておくと、実際にpositionを使ってレイアウトするときやソースコードを参考にしたときにすんなりと記述しやすくなります。
ぜひ覚えておきましょう！
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
