【CSS基礎】position: absoluteとは？親要素との関係・基準・使い方を徹底解説！

CSSでレイアウトを調整するとき、最もよく登場するプロパティのひとつが position: absolute; です。
要素を自由な位置に動かせる非常に便利な指定ですが、仕組みをしっかり理解していないと、
「思った位置に表示されない」「他の要素が崩れる」といったトラブルの原因にもなります。

この記事では、absoluteの基本から仕組み、relativeとの違い、応用例、注意点までを
実際のコードとともに丁寧に解説していきます。

position: absoluteとは？
1. 基本の例
absoluteの基準はどこになるの？
1. 例1：親にpositionがない場合（基準はbody）
2. 例2：親にposition: relative;をつけた場合（基準が変わる）
relativeとの違いを理解しよう
absoluteが使われる代表的な場面
注意点：absoluteの落とし穴
absoluteを使うときのコツ
まとめ

position: absoluteとは？

position: absolute; は、要素を通常の文書の流れ（フロー）から外して自由に配置する指定です。

通常、HTMLの要素は上から順に、親要素の中で自然に積み重なるように配置されます。
しかし position: absolute; を指定すると、その要素はまるで「浮いた」ような存在になり、
top・left・right・bottom の位置指定プロパティを使って自由に動かすことができます。

基本の例

See the Pen Untitled by suguru (@suguru22) on CodePen.

このコードを実行すると、ピンクのボックスは画面全体（body）を基準に上から50px、左から50pxの位置に表示されます。
親要素の中に書いてはいますが、実際の配置の基準は「親要素」ではなく「ページ全体」なのです。

absoluteの基準はどこになるの？

ここがabsoluteの一番のポイントです。
absolute要素は、最も近い「position指定のある祖先要素」を基準に配置されます。
もしそのような要素が存在しない場合は、ページ全体（body）が基準になります。

例1：親にpositionがない場合（基準はbody）

.parent {
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.child {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: pink;
  top: 50px;
  left: 50px;
}

→ ピンクのボックスは「body」基準で動くため、灰色のボックスの中ではなく、
ページの左上から50px・50pxの位置に表示されます。

例2：親にposition: relative;をつけた場合（基準が変わる）

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.child {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: pink;
  top: 50px;
  left: 50px;
}

→ この場合、親の .parent に position: relative; が指定されているため、
ピンクのボックスは灰色のボックスを基準に配置されます。

つまり、親要素の左上を原点（0,0）として、上から50px・左から50pxに表示されるようになります。

relativeとの違いを理解しよう

position: relative; も位置を調整できるプロパティですが、フローに残るかどうかが大きな違いです。

プロパティ	特徴
position: relative;	要素の元の位置を基準に移動。空間は確保される。
position: absolute;	要素が文書の流れから外れる。他の要素に影響しない。

つまり、relative は「元の場所からズラす」だけですが、
absolute は「完全に独立した位置に配置」するイメージです。

absoluteが使われる代表的な場面

1. バナーやボタンをコーナーに固定したいとき

See the Pen Untitled by suguru (@suguru22) on CodePen.

このように指定すると、親要素内の右下にボタンを固定できます。
Webデザインでは、カード下部のボタン配置や「続きを読む」ボタンなどでよく使われます。

2. テキストの上にアイコンを重ねたいとき

See the Pen Untitled by suguru (@suguru22) on CodePen.

画像の右上に星アイコンを重ねるようなデザインも、absoluteで実現できます。
親要素に position: relative; を指定しておくことで、画像の範囲を基準に調整可能になります。

3. 背景画像の上にテキストを配置する

Webサイトのメインビジュアル（ヒーローエリア）などでよく使われるのがこのパターンです。

See the Pen Untitled by suguru (@suguru22) on CodePen.

このようにすると、テキストを画像の上に重ねられます。
レイアウトの自由度が高いのがabsoluteの強みです。

注意点：absoluteの落とし穴

position: absolute; は便利な一方で、使い方を誤るとレイアウト崩れの原因になります。

① 通常フローから外れる

absolute要素は、他の要素と「空間を共有」しません。
そのため、親要素の高さを計算する際に無視されることがあります。
親が高さ0になって背景が消えたように見える場合は、position: relative; を適切に設定するか、
display: flex; や padding で高さを確保しましょう。