【CSS基礎】position: relative; とは？使い方とstaticとの違いをわかりやすく解説

position: relative; は、CSSレイアウトの中でも最もよく使われるプロパティのひとつです。
見た目はstatic（通常配置）とほとんど同じですが、実は「要素を動かせるようにするための土台」となる重要な設定です。

この記事では、position: relative; の意味と使い方、staticとの違い、absoluteとの関係まで、コード例を交えながらわかりやすく解説します。

positionプロパティの基本

まずは前提として、positionプロパティの役割をおさらいしておきましょう。

positionは、要素の位置の基準をどこにするかを決めるCSSプロパティです。
主な値は次のとおりです。

値	意味
static	通常の文書の流れに従う（デフォルト）
relative	自分の元の位置を基準に移動
absolute	親または祖先のposition指定要素を基準に配置
fixed	ビューポート（画面）を基準に固定配置
sticky	スクロールに応じて固定／通常位置を切り替え

今回は、この中でもrelative（相対配置）に焦点を当てて解説します。

position: relative; は、要素を「元の位置」から相対的に動かすための指定です。
英語の “relative” は「相対的な」という意味で、
「もともとの位置を基準に少しだけずらす」イメージを持つと分かりやすいです。

See the Pen Untitled by suguru (@suguru22) on CodePen.

結果：
ボックスは、本来の位置から「下へ30px」「右へ40px」ずれて表示されます。
ただし、ずれた後も元の位置のスペースはそのまま確保されます。

一見似ていますが、relative と static には明確な違いがあります。

プロパティ	配置の基準	top / left などの指定	z-index
static	通常フロー	×（無効）	×（無効）
relative	自分の元の位置	○（有効）	○（有効）

つまり、

という点が大きな違いです。

See the Pen Untitled by suguru (@suguru22) on CodePen.

結果：

「見た目がほとんど変わらないのに、なんでrelativeを使うの？」
と思うかもしれません。
実は、relativeの真の強みは 「子要素の基準を作る」 ことにあります。

position: absolute; の要素は、
最初のposition指定を持つ祖先要素を基準に配置されます。

つまり、親要素に position: relative; を指定すると、
子要素をその中で自由に動かすことができるようになります。

See the Pen Untitled by suguru (@suguru22) on CodePen.

結果：
ピンクの子要素は、親要素（灰色ボックス）の中で
上から50px、左から50pxの位置に配置されます。

もし親にposition: relative;がなければ、
子要素は画面全体（body）を基準に配置されてしまいます。

relativeで移動しても、周囲のレイアウトには影響しません。
他の要素がそのスペースを詰めてくることはありません。

relativeはちょっとした調整（数px〜数十px）に適しています。
大きく位置を変える場合は、absolute や flexbox、grid の利用を検討しましょう。

relativeは「少し動かす」「absoluteの基準を作る」といった、
CSSレイアウトの要になる設定です。