CSSのposition absolute/relative完全ガイド【2026年版】

この記事の結論

position:relativeとは、要素を「元の位置」を基準に相対的にずらすプロパティで、要素はもとのスペースを保持したまま移動します。一方position:absoluteは、位置指定された親要素を基準に絶対配置するプロパティで、要素は文書の通常フローから外れます。relativeは「基準づくり」、absoluteは「自由配置」と覚えると使い分けが明確になります。

生徒

ペン博士、positionの absolute と relative がよく分かりません。どう使い分ければいいんでしょうか？

ペン博士

ふむふむ。要は「基準（どこを起点に置くか）」と「文書の流れに居るか/外れるか」じゃ。今から詳しく解説するからよーく聞くんじゃぞ。

生徒

ありがとうございます！お願いします！

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

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

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

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

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

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

あわせて読みたい

【副業目指すママさん必見】テックアカデミー卒業後に再入学！育児と学習を両立させて”月10万円&#… ペン博士！今回はどんな方がインタビューに応じてくださったんですか？ うむ。今回は育児と学習を両立しながら月10万円の副収入を達成したママさんじゃよ。学習方法、案…

positionプロパティとは？5つの値を解説

relativeとabsoluteの違い

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

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

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

ペン博士

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

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

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

position relativeの使い方|実装例3選

ペン博士

ここでは、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アニメーション完全ガイド｜「ぽよん」効果の実装方法 この記事の結論 「ぽよん」と弾むCSSアニメーションは、@keyframesとtransform（translateYとscale）を組み合わせて実装します。translateYで上下移動、scaleで大きさの...

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

あわせて読みたい

CSSアニメーション回転を完全ガイド|基本から応用まで この記事の結論 CSSの回転アニメーションは、@keyframesで0度から360度への変化を定義し、animationプロパティで要素に適用するのが基本です。JavaScript不要でCSSのみ...

position absoluteの使い方|レイアウト実装法

ペン博士

ここでは、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% で配置され、サイドバーの横に位置しています。

ペン博士

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

z-indexで重なり順序を制御する方法

ペン博士

ここでは、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が効かない原因は？よくあるミス5つと対処法

ペン博士

ここでは、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 などの単位を活用し、柔軟に高さと幅を設定しましょう。

生徒

ペン博士！positionのabsoluteとrelativeの違い、よくわかりました！
非常にわかりやすかったです！

ペン博士

そう言ってくれて嬉しい限りじゃ！absolute は“親を基準に置く”、relative は“その場にいながら見た目だけズラす”。そして親に position: relative; を付けるのが肝じゃぞ！

生徒

早速自分のページで試してみます。ペン博士、ありがとうございました！

position: absoluteの実装例3選（中央寄せ・バッジ・オーバーレイ）

position: absoluteは、親要素にposition: relativeを指定したうえで使うのが基本です。ここでは実務で頻出する3つの配置パターンを、そのまま使えるコードで紹介します。

① 要素を中央にぴったり配置する

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

② アイコンに通知バッジを重ねる

.icon { position: relative; }
.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

③ 画像の上にテキストを重ねる（オーバーレイ）

.hero { position: relative; }
.hero__text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
}

いずれも「親にrelative／子にabsolute」がセットです。親への指定を忘れると、より外側の要素やページ全体を基準に配置され、意図しない位置に飛んでしまいます（詳しくは前述の『positionが効かない原因』を参照）。

position 5つの値 早見表｜static / relative / absolute / fixed / sticky の違い

「どのpositionを使えばいい？」と迷ったときの早見表です。基準になる要素と元のスペースを空けるかで覚えると使い分けが一気にラクになります。

実務でよく使う組み合わせをまとめると次のとおりです。absoluteは必ず親にrelativeを付けるのが鉄則です。

.parent { position: relative; }      /* 基準になる親 */
.badge  { position: absolute; top: 8px; right: 8px; }  /* 親の右上へ */
.header { position: fixed;  top: 0; width: 100%; }     /* 画面上部に固定 */
.nav    { position: sticky; top: 0; }                  /* 追従見出し */

まとめ：position relativeとabsoluteの使い分け

本記事では、CSSのpositionのabsoluteとrelativeの使い方について解説しました。

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

要点は以下の通りです。

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

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

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

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

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

関連記事

• CSS Painting API完全ガイド｜Houdini PaintWorklet・カスタム背景・CSS @property・アニメーション・SVG比較・Viteバンドルまで徹底解説
• 【実践ガイド】Tailwind CSSデザインシステム運用の完全マニュアル！構築から運用まで実装例を踏まえて詳しく解説
• CSSダークモード実装の完全ガイド｜設計から対応まで
• CSSコンテナクエリ実装完全ガイド｜実案件対応2026年版
• Jamstackフォーム処理【2026年版】サーバーレス実装完全ガイド

参考リンク（公式・一次情報）

• MDN Web Docs — CSS

よくある質問（FAQ）

Q1. position relativeとabsoluteの違いは何ですか？

A. relativeは要素の本来の位置を基準に相対的に位置を調整でき、他の要素の配置に影響を与えません。absoluteは要素を文書の流れから外し、親要素を基準に絶対的な位置へ自由に配置できます。relativeは「その場にいながら見た目だけずらす」、absoluteは「親を基準に置く」と理解すると分かりやすいです。

Q2. position absoluteが効かないのはなぜですか？

A. 最も多い原因は、親要素にposition: relativeまたはabsoluteが設定されていないことです。親要素がデフォルトのstaticのままだと画面全体を基準に配置されてしまいます。また高さや幅が指定されていない場合も、配置がうまくいかない原因になります。

Q3. relativeとabsoluteはどう組み合わせて使いますか？

A. 親要素にposition: relativeを設定し、子要素にposition: absoluteを指定するのが基本です。これにより子要素は親要素を基準に自由に配置でき、バナー画像の上にテキストやボタンを重ねるなど、他の要素に影響を与えずにレイアウトをコントロールできます。

Q4. z-indexとは何ですか？

A. z-indexは要素の重なり順を制御するプロパティで、position: relativeやabsoluteで配置した要素に対して有効です。数値が大きいほど前面に、小さいほど背面に表示されます。複数の画像やテキストが重なるレイアウトで、特定の要素を前面に出したいときに使います。

Q5. position relativeはどんな場面で使いますか？

A. フォームやボタン、ナビゲーションメニューなどの要素をtopやleftと組み合わせて微調整する場面や、@keyframesと組み合わせたアニメーションで使われます。要素の元の位置を保ちながら動きを加えられるため、ページ全体の構造を崩さずに調整できます。

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

• 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
• スマホ・PCどちらでもOK：好きな時間に学習できる
• 料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！