【CSS】positionのabsoluteとrelativeの使い方を詳しく解説！

2024年11月4日

CSSで要素の配置が思い通りにいかない、そんな悩みを抱えていませんか？

特に position: relative と absolute の違いや使い分けが分からないと、思い通りにレイアウトを調整するのは難しいです。しかし、これらの基本を押さえて正しく使えば、要素の配置は簡単になり、効率的なレイアウト管理が可能になります。

本記事では、具体的な使い方と実例を通して、これらのプロパティを徹底解説します。

positionプロパティとは？基本を押さえよう

relativeとabsoluteの違い

CSSの position プロパティは、要素の配置方法を指定する際に重要な役割です。特に、relative、absolute はよく使われる値で、それぞれ異なる動作をします。

relative は、要素の本来の位置から相対的に位置を調整できるモードです。relative は、他の要素の配置に影響を与えずに、要素の位置を微調整できます。

absolute は、要素を親要素を基準に絶対位置に配置し、親要素が position: relative を持っている場合、その位置が基準になります。absoluteを使うと、要素は文書の流れから外れ、自由な位置に配置できるため、複雑なレイアウトを構築する際に有効です。

このように、各positionの動作を理解することで、効率的なレイアウト設計が可能です。

positionプロパティについてもっと知りたい方は以下の記事をご確認ください。

CSS公式リファレンス-positionについて

position relativeの使い方とその具体例

レイアウトを微調整する

relativeを使うことで、要素の元の位置はそのまま残り、視覚的に動いた位置が反映されます。複雑なCSSレイアウトの中でも、特定の要素だけを柔軟に調整することが可能です。具体的には、フォームやボタン、ナビゲーションメニューなどの要素を相対的に配置し直すときに役立ちます。視覚的な調整に使う際には、top や left のプロパティと組み合わせて微調整するのが一般的です。

See the Pen relative-1 by kosuke (@kenkenpyo) on CodePen.

.box 要素に position: relative を設定し、その要素を元の位置から top: 20px と left: 30px で相対的に移動しています。
container は文書の流れに従って配置されていますが、その中で .box の位置だけが相対的にずれています。

このように relative を使うことで、親要素や他の要素に影響を与えずに、個別に要素の位置を微調整することが可能です。

アニメーションで使用する

要素の元の位置を基準に動きを与えることで、他の要素に影響を与えずに滑らかなアニメーションを実現できます。たとえば、ボタンがホバーされたときに上下に動く、またはポップアップメニューが表示されるような効果を作る際に使います。

position: relative を使うことで、要素のレイアウト自体はそのまま維持され、動きを与えてもページ全体の構造が崩れません。さらに、CSSの @keyframes と組み合わせることで、複雑な動きのアニメーションも簡単に実装可能です。

See the Pen Untitled by kosuke (@kenkenpyo) on CodePen.

この例では、 position: relative を使ってボックスが上下に動くアニメーションを実装しています。
@keyframes でアニメーションの動きを指定し、ボックスが上下に20px動き、元の位置に戻るアニメーションを繰り返します。

このように、position: relative はアニメーションを実装する際に非常に有効です。他の要素に影響を与えずに動きを加えることができ、動的なデザインをするのに適しています。

アニメーションについてもっと詳しく知りたい方は以下の記事をご確認ください。

CSSアニメーションを使って「ぽよん」と動かす！初心者でもできる実装ガイド

【簡単！】CSSアニメーションの回転の実装方法を詳しく解説

position absoluteの使い方と実用例

relativeとabsoluteを組み合わせて使用する

position: absolute は、通常 position: relative を指定された親要素と組み合わせて使用されます。absoluteの要素は、親要素を基準にして配置が決まるため、親要素に position: relative を設定しておくことで、子要素の位置を自由に調整でき、レイアウトの柔軟性を高める有効な方法です。

たとえば、Webページでバナーの上にテキストやボタンを重ねたい場合、親要素に relative を設定し、子要素に absolute を使うと、テキストやボタンを自由に配置できます。この組み合わせによって、他の要素の配置に影響を与えることなく、意図した通りに表示をコントロールすることが可能です。

以下のコード例では、親要素に position: relative を設定し、子要素の画像やテキストを absolute で重ねています。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

この例では、.container に position: relative を設定し、その中にある .overlay-text は position: absolute で、バナー画像の上に自由に配置されています。

レイアウトの具体例

position: absolute は、要素を文書の流れから切り離して、親要素に対して絶対的な位置に配置するためのプロパティです。これを使えば、特定の要素を自由に配置でき、複雑なレイアウトを簡単に作成できます。

たとえば、2つの要素が並んだレイアウトや複数の重なり合った要素を使用したデザインにおいて、絶対位置を指定することで、視覚的にリッチな画面が作成可能です。親要素に position: relative を設定し、その上に子要素を position: absolute で配置することで、親要素内での子要素の配置が意図通りに行えます。

以下に、具体的なレイアウト例を示します。

See the Pen relative-4 by kosuke (@kenkenpyo) on CodePen.

この例では、親要素 .container に position: relative を設定しています。
.sidebar は position: absolute で配置されており、画面の左側に固定。
.main-content は left: 25% で配置され、サイドバーの横に位置しています。

このように、絶対位置指定を使用すると、親要素の中で要素を自由に配置できるため、複雑なレイアウトを効率的に構築することができます。

CSSレイアウトにおけるz-indexの使い方

positionとz-indexで要素を重ねる

z-index プロパティは、要素の重なり順を制御するために使われ、特にposition: relative や position: absolute を使って要素を配置した際に、どの要素が前面に表示され、どの要素が背面に隠れるかを管理できます。z-index の数値が大きいほど、その要素は前面に表示され、小さい数値の要素は背面に配置される仕組みです。

たとえば、複数の画像やテキストが重なるレイアウトを作成する際に、特定の要素を前面に表示したい場合に z-index を利用します。通常、親要素に position: relative を設定し、その中の子要素に z-index を指定することで、期待通りのレイヤー配置が可能です。

See the Pen relative-5 by kosuke (@kenkenpyo) on CodePen.

.container 要素に position: relative を設定し、子要素を position: absolute で自由に配置しています。
z-index を使用して、.box1 を最背面、.box3 を最前面に表示しています。

positionが効かない原因と対処法

親要素にpositionが設定されていない

position: absolute を使っているとき、期待通りに要素が配置されない場合、その原因は親要素に position: relative または position: absolute が設定されていないことが多いです。絶対配置の要素（absolute）は、最も近い親要素の position プロパティが relative または absolute に設定されていることを前提にして配置されます。

もし親要素がデフォルトの position: static のままだと、画面全体を基準に配置されてしまうため、思い通りにレイアウトを組むことができません。

対処法：親要素に position: relative を設定

以下に例を示します。

親要素にposition: relativeを設定していない場合：

See the Pen relative-6 by kosuke (@kenkenpyo) on CodePen.

このように子要素で位置を指定してますが、親要素から離れていません。

親要素にposition: relativeを設定した場合：

See the Pen relative-7 by kosuke (@kenkenpyo) on CodePen.

親要素に position: relative を設定しているため、子要素の position: absolute は親要素の位置を基準にして配置され、意図通りのレイアウトが実現できます。

overflow: hidden が親要素に設定されている

overflow: hidden は、親要素のコンテンツがはみ出したときに、はみ出した部分を表示しないようにするプロパティです。このプロパティが設定されていると、position: absolute や relative を使って要素を自由に配置しても、親要素の境界外に出た部分は隠されてしまいます。

たとえば、バナー画像の上にボタンやテキストを absolute で配置して、親要素を超えて表示させたいときに、overflow: hidden が有効になっていると、ボタンやテキストが一部見えなくなることがあります。

対処法：overflow: visible に変更することで、はみ出したコンテンツを表示させる

以下に例を示します。

overflow: hiddenの場合

See the Pen relative-8 by kosuke (@kenkenpyo) on CodePen.

overflow: visibleの場合

See the Pen relative-9 by kosuke (@kenkenpyo) on CodePen.

このようにvisibleにすることで表示できます。なお、デフォルトの設定ではoverflowプロパティはvisibleです。overflowプロパティを削除することで期待通りのレイアウトになります。

z-index値と競合している

z-index プロパティは、要素の重なり順を制御するために使用されますが、複数の要素で z-index の値が競合していると、意図した順番で要素が表示されない場合があります。特に、異なる position の設定が組み合わさると、この問題が発生しやすくなります。

たとえば、複数の要素に position: absolute を設定し、それぞれに異なる z-index の値を指定しているにもかかわらず、正しく前面や背面に表示されないことがあり、要素が属する stacking context（スタッキングコンテキスト）によるものが原因です。

スタッキングコンテキストは、Webページで「どの要素がどの要素の前に表示されるか」を決める仕組みです。たとえば、画像やボタンがどの順番で重なって表示されるかをコントロールするために使い、特定の要素がスタッキングコンテキストを作ると、その中にある要素は、外側の要素と別に重なり順を持つようになります。

スタッキングコンテキストはrelative、absolute、fixedなどを使用すると作成されます。

親要素が新しいスタッキングコンテキストを作成した場合、子要素の z-index が効かないことがあります。

対処法：z-index の値が意図通り設定されているか確認する

See the Pen relative-10 by kosuke (@kenkenpyo) on CodePen.

.container 要素は position: relative を設定して新しいスタッキングコンテキストを作成しています。
z-index を正しく設定し、.box2 が .box1 より前面に表示されるようにしています。

このように、z-index とスタッキングコンテキストを理解し適切に管理することで、要素の重なり順を意図通りに制御できます。

高さや幅が設定されていない

position プロパティを使って要素を配置しようとしても、要素が正しく表示されない場合、高さや幅の指定が欠けていることが考えられ、特に親要素や子要素にwidth や height が設定されていないと、要素が意図しない形で表示されたり、配置がうまくいかないことがあります。

たとえば、position: absolute を使って要素を親要素に対して配置しようとする際に、親要素の高さや幅が自動で計算されると、その配置が思い通りにいかないことも多いです。

対処法：親要素と子要素の width や height を明確に指定する。

特にレスポンシブデザインの場合は、パーセンテージや vw、vh などの単位を活用し、柔軟に高さと幅を設定しましょう。

まとめ

CSSのpositionプロパティ は、要素を自由にレイアウトし、他の要素と干渉しないように配置するための重要なプロパティです。特に、position: relative と position: absolute の使い方を正しく理解することで、Webデザインの自由度を大きく高めることができます。

relative を使えば、要素の位置を基準にした微調整が可能になり、absolute を使うことで、要素を親要素内で正確に配置できます。さらに、z-index との組み合わせにより、重なり順も制御できるため、複雑なレイアウトにも対応可能です。

しかし、positionプロパティがうまく効かない場合もあるため、その際は今回解説した原因と対処法を参考に、要素のスタイル設定を見直すことが大切です。

CSSの基本を押さえ、実際にコードを使って試行錯誤することが、最適なデザインの実現につながるでしょう。