【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つのプロパティ（例：「top」と「left」、「right」と「bottom」等）は適用するようにしましょう。

事例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;は、相対位置を基準に位置が決定されます。ここでいう相対位置とは、「本来その要素が表示される位置を基準」としています。

イメージとしては次の画像のようになります。

相対位置要素が本来表示される元の位置（点線の位置）を基準として、top, left, bottom, rightなどのプロパティで配置を変えます。position: relative; を指定した要素は、自分自身の位置を基準にして移動することができます。

絶対位置

position: relative; とセットで使うことが多い「position: absolute;」を要素に指定すると、その要素は、親要素（relativeが指定された要素）を基準に自由に配置することができます。

以下の記事でも解説しています。

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

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プロパティを適用してあげましょう。

かめるん先生

ただし、z-indexを使う場合はstaticを除く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を使うケース

position :relative; の特徴や使い方を理解したうえで、実際に実務でposition : relative;  を使うケースをいくつか紹介しましょう。

ケース1：擬似要素で装飾画像や要素を配置したいとき

こちらはposition :absolute; とセットで使います。

<div class="c-searchButton">
 <input name="s" id="s" type="text" placeholder="キーワードから探す">
 <button class="c-searchButton__icon"></button>
</div>

.c-searchButton {
    display: block flex;
    padding: 2px 12px 2px 2px;
    background: #e7e7e7;
    border-radius: 30px;
}

.c-searchButton input {
    margin-right: 2px;
    border-radius: 30px;
    font-size: 12px;
    width: 100%;
    height: 100%;
    padding: 8px;
    border: none;
    color: #8b8b8b;
    outline: 0;
    background: 0 0;
}

.c-searchButton__icon {
    position: relative;
    width: 30px;
    height: 30px;
    align-self: center;
    background:transparent;
    border:transparent;
}

.c-searchButton__icon::before {
    position: absolute;
    content: "";
    background: url(search.png) no-repeat center / contain;
    width: 100%;
    height: 100%;
    display: block;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}

出力結果

See the Pen 検索フォーム by ZeroPlus (@zeroplus-programming) on CodePen.

ケース2:重なり順を制御するためにposition : relative;  を使う

例えば、モーダルウィンドウを表示するとき、すでに表示されているコンテンツより前に表示する必要があります。position :relative; とz-indexを使って、重なり順を制御してコンテンツより前に表示させます。

<button class="button">モーダルボタン</button>
<div class="overlay">
  <div class="modal">
    <h2>モーダルコンテンツ</h2>
  </div>
</div>

.button {
    background-color: orange;
    color: white;
    cursor: pointer;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    display: flex;
    align-items: center;
}

.modal {
    position: relative;
    z-index: 1000; /* overlayより前面に出す */
    background: #fff;
    padding: 2rem;
    margin: auto;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    text-align: center;
    min-height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay.open {
    z-index: 999; /* モーダルを表示するために前面に出す */
    opacity: 1;
}

// ボタンとモーダル背景要素を取得して変数に格納
const button = document.querySelector('.button');
const overlay = document.querySelector('.overlay');

// ボタンをクリックしたらモーダル要素にopenクラスが付与されモーダルが展開
button.addEventListener('click', () => {
  overlay.classList.add('open');

});

// モーダルをクリックするとモーダルが非表示になります。
overlay.addEventListener('click', () => {
  overlay.classList.remove('open');
});

出力結果

See the Pen モーダル by ZeroPlus (@zeroplus-programming) on CodePen.

JavaScriptの処理を簡単に解説すると、ボタンとモーダル背景要素を取得して変数に格納、ボタンをクリックしたらモーダル要素にopenクラスが付与されモーダルが展開されます。

モーダルをクリックするとモーダルが非表示になります。

かめるん先生

他にも、例えば背景画像を擬似要素で設定しているとき、重なり順によってはコンテンツが背景画像の下に隠れて表示されなくなることがあります。

その場合は背景画像のz-indexの数値を小さくするか、表示されなくなったコンテンツにposition : relative;  やz-indexを指定すると、そのコンテンツが表示されるようになります。

なお、position :relative; は単体で使用されるケースはほとんどありません。

まとめ

本記事では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

コピー