【CSS】position: relative; の使用方法を初心者向けに分かりやすく解説

position: relative;は現在位置を基準にして、要素を相対位置へと要素を移動させる際に使われる指定です。しかし、相対位置という概念自体が難しいため、苦手意識を持つ場合があるかもしれません。そこで本記事では、position: relative;の使い方と特徴を解説します。要素の位置を移動させる際に使われる指定の一つのため、ぜひ学習していきましょう！

なおposition: relative;とposition: absolute; はセットで使われるケースが一般的です。それについては以下の記事で詳しく解説しているためぜひご覧ください。
【CSS】positionのrelativeとabsoluteの使い方と具体例を解説

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

position: relative; の使い方「要素の現在位置を基準に相対位置を指定」

positionプロパティは、要素の配置を指定するプロパティです。初期値のstaticのままでは要素の位置を変えられませんが、relativeを指定すると要素の現在位置を基準にした相対位置に要素を配置できます。

基本は以下のように書きます。

セレクタ {
  position: relative;
}

positionプロパティは「top」「right」「bottom」「left」の4つのプロパティと合わせて、要素の配置を指定します。要素の位置を確定させるため、少なくとも2つのプロパティは適用するようにしましょう。

事例1次のようなHTMLとCSSがあります。

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

出力結果

See the Pen position-relative前 by ZeroPlus (@zeroplus-programming) on CodePen.

まだboxクラスにpositionを適用していないため、画面左上に要素が配置されています。ここでboxクラスにposition: relative;と、top, leftを適用すると以下のように変化します。

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: relative; /*追記*/
  top: 50px; /*追記*/
  left: 50px; /*追記*/
}

出力結果

See the Pen position-relative後 by ZeroPlus (@zeroplus-programming) on CodePen.

position: relative; と、top, leftの指定によって、元の位置から要素が下に50px、左に50pxの位置に配置されます。

position: relative; の3つの特徴

position:relative;の特徴を押さえれば要素をうまく配置しやすくなるため、ぜひ確認していきましょう。

特徴1 ． 要素を移動しても、要素の高さを維持したまま配置

position: relative; は、要素の高さを維持したまま配置されるため、下にある要素が詰まることはありません。

事例2以下のように「box」と「min-box」、2つのボックスを用意します。

<div class="box"></div>
<div class="min-box"></div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}


.min-box {
  width: 100px;
  height: 100px;
  background: red;
}

出力結果

See the Pen relative前2 by ZeroPlus (@zeroplus-programming) on CodePen.

現状position: relative; を指定していないので、boxの下にmin-boxが配置されています。このときboxクラスに、position: relative; とtop, leftを適用すると次のようになります。

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: relative; /*追記*/
  top: 50px; /*追記*/
  left: 130px; /*追記*/

}

.min-box {
  width: 100px;
  height: 100px;
  background: red;
}

出力結果

See the Pen relative後2 by ZeroPlus (@zeroplus-programming) on CodePen.

このようにboxを移動させても、min-boxは上に詰まることなく現状の位置を維持しています。position: relative; で移動させた要素は、元の位置で高さを維持する特徴を持つわけです。

特徴2 ．z-indexで重なり順を指定できる

position: relative; は、要素の重なり順を指定するz-indexを適用することができます。

事例3

boxの位置を相対位置に変更してmin-boxと重ねてみます。z-indexを適用しない場合の、2つの要素の並びを確認してみましょう。

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: relative;
  top: 50px;
  left: 80px;
}

.min-box {
  width: 100px;
  height: 100px;
  background: red;

}

出力結果

See the Pen relative-並び順 by ZeroPlus (@zeroplus-programming) on CodePen.

z-indexの指定前、position: relative; が適用されたboxが、min-boxの上に重なるように配置されます。

min-boxの裏にboxを配置する場合、CSSにz-indexを追記します。

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: relative;
  top: 50px;
  left: 80px;
  z-index: -1;　/*追記*/

}

.min-box {
  width: 100px;
  height: 100px;
  background: red;

}

出力結果

See the Pen relative-重なり順 by ZeroPlus (@zeroplus-programming) on CodePen.

z-indexプロパティは、数字が大きいほど前に、数字が小さいほど後ろに配置されます。ここではboxにz-index: -1; を指定しているため、z-index: 0; のmin-boxの裏側に配置されます。

このように要素の重なり順を指定する場合は、z-indexプロパティを適用してあげましょう。ただしpositionプロパティ（relative, absolute, fixed, sticky）の適用が必要になります。なお、staticはz-indexは反映されません。

特徴3． positon: absolute; とセットで使用するのが基本

position: relative; を単体で使用するケースは、さほどありません。子要素にposition: absolute; を使用する場合に、親要素に対してposition: relative; を適用する使い方が一般的です。

これにより親要素の位置を基準に子要素の位置を配置できます。ここではrelativeとabsoluteをセットにした使い方を、かんたんに解説します。

<div class="parent">
  <div class="box"></div>
</div>

.parent {
  width: 500px;
  height: 500px;
  background: skyblue;
  position: relative;

}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  position: absolute;
  top: 50px;
  left: 50px;

}

出力結果

See the Pen relative-absolute by ZeroPlus (@zeroplus-programming) on CodePen.

boxにはposition: absolute; を適用し、その親要素であるparentにposition: relative; を適用します。これにより親要素を基準として、子要素の位置を指定できるようになります。position: absolute;については以下の記事で詳しく解説していますので、併せてご覧ください。

【CSS】positionのrelativeとabsoluteの使い方と具体例を解説

なお、positionプロパティに指定できる値には、relativeやabsolute以外にも「fixed」や「static」、「sticky」などたくさんあります。以下の記事をお読みいただくと、さらにpositionプロパティの理解が深まります。

【CSS】positionのfixedで要素を固定！具体的な使い方を解説 | ZeroPlus Media

【CSS】位置も重なりも指定できないposition: static; の使い方を解説 | ZeroPlus Media

【CSS】position: sticky; の使い方と効かない場合の対処法を解説 | ZeroPlus Media

いっぺんに学ぼうとするとパンクしてしまうので、少しずつあなたのペースで学んでいきましょう。

まとめ

本記事ではposition :relative; の使い方や特徴を解説しました。要点を以下にまとめます。

relativeは単体で使用するケースはあまりなく、absoluteとセットで使われることが一般的です。relativeが理解できたら、absoluteも学んでみましょう。
【CSS】positionのrelativeとabsoluteの使い方と具体例を解説
ZeroPlusMediaはあなたのプログラミング学習を応援します。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー