CSSのposition:「absolute」と「relative」とは

CSSを記述するときにpotionプロパティを利用して、要素の位置をずらすことがあります。そのときに出てくるのが「absolute(絶対位置)」「relative(相対位置)」です。

なんとなく使っていたけど、「絶対位置」「相対位置」と言われてもなかなかピンとこない人もいるのではないでしょうか。

今回は実際に配置した例を見て、「absolute」と「relative」について確認していきましょう。

positionプロパティとは

まずは、「absolute」「relative」を使ううえで欠かせないpositionプロパティについても説明します。

positionプロパティは、「要素を配置する基準」を指定するためのプロパティです。「absolute」と「relative」はこの「基準」の場所を区別するためにあるということを理解していると、この先の説明もわかりやすく感じると思います。

absoluteとは

「absolute」は移動するときの基準がウィンドウ、または親要素になります。

つまり複数の要素がある場合でも「absolute」で指定すると、他の要素を無視して左上(top:0、left:0の位置)から移動するということです。

実際に配置した例を見ていきましょう。

200px×100pxのboxを3つ並べました。

青色のbox2という箱を「top:300px(上から300px)、left:200px(左から200px)」に移動させました。

上記の例だと、box2はbox1を無視してウィンドウの左上を基準にして移動しました。「absolute」は移動させた要素の高さが残らないので、box3もbox2を無視して位置を詰めています。

relativeとは

「relative」は移動するときの基準が元いた位置になります。

つまりpositionを記述する前に配置されていた場所から移動するということです。

実際に配置した例を見ていきましょう。

「absolute」のときと同じ設定で記述しました。


同じく青色のbox2という箱を「top:300px(上から300px)、left:200px(左から200px)」に移動させました。

上記の例だと、box2は自分が元々いた位置を基準にして移動しています。

少しだけ移動したいときにはとても便利な「relative」ですが、移動させた要素の高さが残ってしまうという注意点があります。box3が「absolute」のときのように位置を詰めないのは、空白部分にbox2が透明に残ってしまっているからだと思ってください。

absoluteとrelativeの使い方

実際にWebサイトを制作すると、親要素を基準にして子要素を移動させたいという場合が多いです。しかし要素に空白を残したくないからと、子要素にだけ「absolute」を記述してしまうと思ったように表示することができません。

例えば、400px×400pxの親要素(赤のボックス)の中にある200px×200pxの子要素(青のボックス)に「position:absolute;」を指定して「top:200px、left:200px」に移動させると、このように表示されてしまいます。

これは、親要素ではなくウィンドウのほうを基準にして子要素が移動してしまっているからです。

親要素を基準にするためには、親要素にも「position:relative;」を記述します。

こうすることで、子要素が親要素を基準に移動することができます。

まとめ

「relative」と「absolute」は、最初は混乱するかもしれませんが、少しでも理解しておくと、実際にpositionを使ってレイアウトするときやソースコードを参考にしたときにすんなりと記述しやすくなります。ぜひ覚えておきましょう。