CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: absolute

Web APP CSS
スポンサーリンク

position: absolute は「レイアウトの流れから抜けて、好きな場所に貼り付ける」

position: absolute は、普通の要素と違って「文書の流れ（通常フロー）」から外れます。
その代わりに、親要素や画面の四隅を基準にして、top / right / bottom / left でピンポイントに配置できます。

ただし、自由度が高いぶん、使い方を間違えるとレイアウトが崩れやすいので、
「どこを基準にするか」「何に重ねたいか」を意識するのがとても重要です。

基本のルールと「基準点」の考え方

どこを基準に配置されるのか

position: absolute の要素は、次のような順番で「基準」を探します。

  1. 一番近い position: relative / absolute / fixed / sticky が付いた祖先要素
  2. それがなければ、ページ全体（初期コンテキスト、だいたい <body>）

だから、実務ではほぼ必ず「親に position: relative を付けてから、子を absolute にする」という形になります。

CSS の最小例

.box {
  position: absolute;
  top: 20px;
  left: 40px;
}
CSS
<div class="box">
  絶対配置されたボックス
</div>
HTML

この場合、基準が何もないので「ページ全体の左上」から 20px 下、40px 右に配置されます。
普通はこれだと扱いづらいので、親に position: relative を付けて使います。

Tailwind の最小例

<div class="relative bg-gray-100 h-40">
  <div class="absolute top-5 left-10 bg-blue-500 text-white px-3 py-1 rounded">
    絶対配置
  </div>
</div>
HTML

外側の relative が「基準点」、内側の absolute top-5 left-10 が「そこからのオフセット」です。

例1：画像の上にテキストを重ねる（定番オーバーレイ）

CSS 版

.card {
  position: relative;
  display: inline-block;
}

.card img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.card-title {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
CSS
<div class="card">
  <img src="photo.jpg" alt="">
  <div class="card-title">キャプションテキスト</div>
</div>
HTML

ここでの重要ポイントは、.card に position: relative を付けていることです。
これにより、.card-title の absolute は「画像を含むカードの四隅」を基準に配置されます。

もし .card に relative がなければ、テキストはページ全体を基準にしてしまい、画像の上に乗らなくなります。

Tailwind 版

<div class="relative inline-block">
  <img src="photo.jpg" alt="" class="block w-full rounded-lg">
  <div class="absolute left-4 bottom-4 text-white text-lg font-semibold drop-shadow">
    キャプションテキスト
  </div>
</div>
HTML

親に relative、子に absolute left-4 bottom-4。
この組み合わせは「画像の上に何かを乗せる」ときの鉄板パターンです。

例2：カードの右上にバッジを重ねる

CSS 版

.card {
  position: relative;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 9999px;
}
CSS
<div class="card">
  <span class="badge">NEW</span>
  <h3>商品タイトル</h3>
  <p>商品の説明テキストが入ります。</p>
</div>
HTML

top: -8px; right: -8px; のようにマイナス値を使うと、
カードから少しはみ出した位置にバッジを置けます。

Tailwind 版

<div class="relative bg-white p-4 rounded-lg shadow">
  <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
    NEW
  </span>
  <h3 class="text-lg font-semibold mb-1">商品タイトル</h3>
  <p class="text-sm text-gray-600">商品の説明テキストが入ります。</p>
</div>
HTML

ここでも「親 relative ＋ 子 absolute」のセットです。
バッジの位置は -top-2 -right-2 で微調整しています。

例3：ツールチップ（吹き出し）をボタンの上に出す

CSS 版

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #111827;
  color: #f9fafb;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
}
CSS
<div class="tooltip-wrapper">
  <button>ボタン</button>
  <div class="tooltip">ツールチップのテキスト</div>
</div>
HTML

bottom: 100% で「ボタンの上端」を基準にし、
left: 50% と transform: translateX(-50%) で中央揃えにしています。

Tailwind 版

<div class="relative inline-block">
  <button class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded">
    ボタン
  </button>
  <div class="absolute left-1/2 bottom-full -translate-x-1/2 mb-2
              bg-gray-900 text-gray-50 text-xs px-2 py-1 rounded whitespace-nowrap">
    ツールチップのテキスト
  </div>
</div>
HTML

bottom-full が bottom: 100%;、left-1/2 -translate-x-1/2 が「横方向の中央揃え」です。
absolute を使うと、こうした「ピンポイントの位置合わせ」がしやすくなります。

例4：モーダルの中央配置（absolute 版）

本番では fixed を使うことが多いですが、
absolute でも「親を画面全体に広げれば」同じようなことができます。

CSS 版

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  position: relative;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  width: 320px;
}
CSS
<div class="overlay">
  <div class="modal">
    モーダルの中身
  </div>
</div>
HTML

ここではモーダル自体は relative ですが、
もし overlay を relative にして、その中で absolute で中央配置することもできます。

Tailwind 版（fixed だが absolute の応用として）

<div class="fixed inset-0 bg-slate-900/50 flex items-center justify-center">
  <div class="relative bg-white p-6 rounded-lg w-80">
    モーダルの中身
  </div>
</div>
HTML

absolute で中央に置きたい場合は、
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
というパターンもよく使います。

position: absolute を使うときの注意点と考え方

通常フローから外れる＝「周りのレイアウトには参加しない」

absolute の要素は、他の要素を押しのけたり、
高さを親に伝えたりしません。

つまり

  • 親の高さは absolute の子を「高さとして認識しない」
  • 下の要素が「下に押し出されない」ので、重なってしまうことがある

という性質があります。

だからこそ、absolute は「重ねる」「飾りを置く」「一時的な表示」に向いていて、
メインのレイアウト構造にはあまり使わない方が安全です。

「基準点を必ず意識する」

absolute を書くときは、必ず

「この要素は、どの要素を基準に動いているのか？」

を意識してください。

基準にしたい親に position: relative を付ける。
これを忘れると、「なんか変なところに飛んでいく」現象が起きます。

Tailwind では「relative と absolute はセットで覚える」

実務でよく出てくる形は、ほぼこれです。

<div class="relative">
  <div class="absolute top-0 right-0">...</div>
</div>
HTML

画像の上のテキスト、カードのバッジ、入力欄のアイコン、ツールチップ、
どれもこのパターンの応用です。

まとめ

position: absolute は

  • 通常フローから外れて、好きな位置に貼り付けられる
  • 親（relative など）を基準に top / right / bottom / left で配置する
  • レイアウトではなく「重ねる・飾る・ピンポイント配置」に向いている

という性質を持っています。

CSS では

.parent { position: relative; }
.child  { position: absolute; top: 0; right: 0; }
CSS

Tailwind では

<div class="relative">
  <div class="absolute top-0 right-0">...</div>
</div>
HTML

この形をまず体に染み込ませておくと、
「ここにだけ何かを重ねたい」がほぼ全部表現できるようになります。

スポンサーリンク
タイトルとURLをコピーしました