CSSのpositionで「relative」,「absolute」,「fixed」の違いを理解しよう

2020年8月4日

cssのpositionプロパティでボックスの配置方法を見ていきます。

この記事の目次

positionプロパティとは？

positionプロパティは、要素を相対的、または絶対的に配置するためのプロパティです。また、スクロールしても配置を固定することもできます。それぞれ見ていきましょう。

positionプロパティの種類と使い方

positionプロパティには4つの値を指定できます。初期値は「static」で、「relative」、「absolute」、「fixed」となります。

p{
  position:static;
}
p{
  position:relative;
  top:10px;
}
p{
  postion:absolute;
  top:10%;
}
p{
  position:fixed;
  top:10px;
  left:20px;
}

positionプロパティは配置方法を指定しますが、併せて基準位置からの移動距離も指定することができます。（※staticには適用されません。）
top、left、right、bottomプロパティを指定し、値には移動距離をpxや%等で指定します。

position:relative;

position:relativeは、「相対的」に配置することができます。基準となる位置は、staticの場合に表示される位置となります。覚え方としては「元いた位置から○○px移動させる。」と覚えましょう。

使用例：HTML

<p class="box01">box01</p>
<p class="box02">box02</p>

まずは、通常時の配置から見てみます。

使用例：CSS（通常時）

p.box01{
  width:100px;
  height:100px;
  background:#b7d8fb;
}
p.box02{
  width:100px;
  height:100px;
  background:#fbb7b7;
}

box01

box02

次に、position:relative;で要素を配置してみます。

使用例：CSS（移動時）

p.box01{
  width:100px;
  height:100px;
  background:#b7d8fb;
  position:relative;
}
p.box02{
  width:100px;
  height:100px;
  background:#fbb7b7;
  position:relative;
  top:-50px;
  left:60px;
}

box01

box02

box02が通常ある位置から「topから-50px」「leftから60px」移動しているのが分かります。このように、top、left、right、bottomプロパティのそれぞれの値は、「○○から○○px」となります。

position:absolute;

次に、「position:absolute;」です。少し扱いづらいところがあって、慣れるまでに時間が掛かるかもしれませんが非常によく使うプロパティなので、ぜひ覚えておきましょう。
relativeが「元々いた位置から相対的」に配置するのに対し、absoluteは「絶対位置」と呼ばれ、「最も近い親要素の位置に対して絶対的」に配置します。基準となるのは、親要素の左上の位置です。但し、注意しなければならないのは、「static」以外で配置している「親要素」が基準となる点です。下記を見てください。

使用例：HTML

<div class="parent">
  <p class="box01">relativeの場合</p>
  <p class="box02">absoluteの場合</p>
</div>

使用例：CSS（通常時）

div.parent{
  width:100%;
  height:300px;
  position:relative;/*staticの場合無効になる*/
}
p.box01{
  width:100px;
  height:100px;
  background:#b7d8fb;
}
p.box02{
  width:100px;
  height:100px;
  background:#fbb7b7;
}

box01

box02

使用例：CSS（移動時）

p.box01{
  width:100px;
  height:100px;
  background:#b7d8fb;
  position:relative;
  bottom:10px;
  right:10px;
}
p.box02{
  width:100px;
  height:100px;
  background:#fbb7b7;
  position:absolute;
  bottom:10px;
  right:10px;
}

box01

box02

static以外で配置された親要素である「.parent」の領域を基準に、下から10px、右から10pxの位置に配置されていることが分かります。ちなみに、親要素を辿ってもstatic以外で配置された親要素が無い場合は、body要素が基準となります。
absoluteを使う際には、親要素にposition:relative;を指定することをセットで覚えましょう。

position:fixed;

最後に、「position:fixed;」です。これは、スクロールした際に移動せず、決まった位置に固定することができるプロパティです。
よくヘッダー部分などで使われることが多く、スクロールしてもヘッダー部分だけ固定されたままのWebサイトをよく見ると思います。

指定方法は、absoluteとほとんど同じですが、基準となる位置が異なるのが特徴です。親要素が基準となるabsoluteと違い、fixedは「body」つまりウィンドウ画面が基準となります。

使用例：HTML

<div class="parent">
  <p class="box01">box01</p>
  <p class="box02">box02</p>
</div>

使用例：CSS

div.parent{
  width:100%;
  height:2000px;
  background:#F6F6F6;
  position:relative;
}
p.box01{
  width:100px;
  height:100px;
  background:#b7d8fb;
  position:absolute;
  top:0;
}
p.box02{
  width:100%;
  height:100px;
  background:#fbb7b7;
  position:fixed;
  top:100px;
}