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

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

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

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

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

O.Yさん
子育てと両立できる働き方を目指し、プログラミングの学習を開始する。独学での学習に限界を感じ、WithCodeの副業コースの受講を決意。最終目標から逆算した学習計画のもとスキルを習得し、卒業後に初案件を担当。現在は実案件サポートのもと、複数案件を担当している。

詳しくはこちらの記事をご覧ください。

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

relativeとabsoluteの違い

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

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

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

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 の位置だけが相対的にずれています。

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

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

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

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

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

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

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

あわせて読みたい

【初心者必見】CSSアニメーションを使って「ぽよん」と動かす！実装例を踏まえて解説 ペン博士！Webサイトで、ボタンとかが「ぽよんっ」って弾むように動くのをよく見かけるんですけど…あれってどうやって作るんですか？ おお、それはCSSアニメーションを...

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

あわせて読みたい

【簡単！】CSSアニメーションの回転方法を基本から応用まで実装例を踏まえて詳しく解説 CSSの回転アニメーションはどうやって実装すれば良いでしょうか？ 今から詳しく解説するからよーく聞くんだぞ！ はい！お願いします！ CSSの回転アニメーションは、Web...

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.

z-index値と競合している

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

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

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

対処法：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のabsoluteとrelativeの使い方について解説しました。

CSSのpositionプロパティ は、要素を自由にレイアウトし、他の要素と干渉しないように配置するための重要なプロパティです。

要点は以下の通りです。

relativeの特徴
要素自身の元の位置を基準にして、上下左右へ位置を微調整できる。

absoluteの特徴
親要素 を基準にして要素を正確に配置可能。
より自由なレイアウトを作るのに役立つ。

z-indexとの組み合わせ
要素の 重なり順を制御 できる。
複雑なデザインや重ね合わせが必要な場合に効果的。

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

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

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！