position: relative;で位置を指定する方法【CSS】

CSSはWebページの見た目を装飾するためのスタイルシート言語です。

その中でもpositionプロパティは要素の配置方法を指定するために使用されます。

本記事ではその中でもrelativeという値に焦点を当てて解説します。

position: relative;とは？

positionプロパティにrelativeを指定すると、要素の配置を相対的に調整することができます。

具体的には、元々の配置からの相対的な位置を指定することができるのです。

CSSはHTMLにスタイルを割り当てる言語ですので、HTMLと同時に学ぶと効果的です！

>> 【簡単】HTMLの基本構造をマスターしよう！【初心者にも分かる解説】 <<

position: relative;の使い方

position: relative;を使うためには、まず対象となる要素に適用します。

例えば、以下のようなコードを書くことでposition: relative;を適用できます。

.example {
  position: relative;
}

このようにすることで、.exampleというクラス名がつけられた要素に対してposition: relative;が適用されます。

position: relative;は要素の相対的な位置を変更するだけで、ドキュメントフロー（要素がページ上に表示される順序）には影響しません。要素が他の要素と重なる場合でも、他の要素のレイアウトや配置は変わりません。

top, left, bottom, rightについて

position: relative;を使うと、要素を元々の位置から相対的に移動させることができます。

この際に使用するのがtop、left、bottom、rightというプロパティです。

これらのプロパティには、ピクセル単位やパーセンテージを指定することができます。

例えば、次のようなコードを使用して要素の上に10px、左に10pxのスペースを作ることができます。

.example {
  position: relative;
  top: 10px;
　left: 10px;
}

//-10pxとすれば逆方向に移動する//

z-indexについて

要素を重ねる（オーバーレイ）効果を実現する際には、z-indexプロパティを使用します。

z-indexは、要素の重なり順を指定するための値です。値が大きいほど上に表示されます。

要素にposition: relative;を適用し、z-indexプロパティを設定することで、他の要素よりも上に表示させることができます。

例えば、次のようなコードを使用して要素の重なり順を指定できます。

.example1 {
  position: relative;
  z-index: 2;
}

.example2 {
  position: relative;
  z-index: 1;
}

//この場合、example2のz-index: 2;を記述しなくてもexample1が上に表示されます//

※コードは関係のある部分のみ表示しています（position: relative;とz-indexのみ記述）

上記の例では、.example1が.example2よりも上に表示されます。

relativeとabsoluteの併用について

relativeと一緒に使われることが多いのがpositionプロパティのもう一つの値であるabsoluteです。

absoluteはrelativeの配置に対して絶対的な位置を指定するために使用されます。

次のような例を見てみましょう。

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

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 30px;
}

このコードはどこを基準にしてtop: 20px; left: 30px;の移動をするのでしょうか？

答えは「position: absolute;」の親要素にある「position: relative;」を基準に配置します。

つまり、.child要素の位置が.parent要素を基準に決定されます。

position: absolute;について解説した記事がありますので、更に詳しく知りたい方はどうぞ。

>>【CSS】position: absolute; で位置を指定する方法を解説 <<

position: relative;の使いどころ

では実際にどんなときにpotision: relative;を使うのか、言語化して説明します。

結論から言うと、potision: relative;は要素の配置を微調整したい場合や、要素を重ねる場合に利用します。

例えば、特定の要素を少し上にずらしたい場合や、画像をテキストの上に重ねて表示したい場合にposition: relative;が有用ですね。

また、position: absolute;とセットで使うことが多いです。

要素の位置についてはpositionプロパティ以外にも、flexboxやGridといった便利でよく利用されている方法があります。

しかし、これはProgateで学習するだけではどうしてもカバーしきれない範囲です。Progate終わりに何をすべきか解説した記事がありますのでそれを読んでみてください。

積極的に新しい要素に触れて、次のステップを踏み出しましょう!

>>【今読まないと遠回り確定】Progate終わりに何をすべきか解説 <<

まとめ

この記事では、CSSのpositionプロパティの一つであるrelativeについて詳しく解説しました。

relativeを使うことで要素の相対的な配置調整が可能であり、topやleftなどのプロパティを使って位置を指定することができます。

また、z-indexプロパティを使うことで要素の重なり順を制御することもできます。

さらに、relativeとabsoluteを併用することで要素の配置を自由に制御することができます。

これらの情報を基に、Webページのデザインやレイアウトの調整に役立ててください。

Twitterでも有益な情報発信を心がけていますので、下のボタンより是非フォローしてください。