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

Web APP CSS
スポンサーリンク

position: relative は「その場にいながら、ちょっとだけズラす＆基準点になる」もの

position: relative は、ざっくり言うと

  • 普段どおりその場所に配置される
  • そこから top / left / right / bottom で「少しだけズラせる」
  • さらに「子要素の absolute の基準点」になる

この2つ（ズラす・基準になる）が本質です。
まずは「ズラす」と「基準点」の2軸でイメージを固めましょう。

基本：relative で「元の位置から少しだけ動かす」

CSS の基本形

.box {
  position: relative;
  top: 10px;
  left: 20px;
}
CSS
<div class="box">
  ボックス
</div>
HTML

このときの動きは

「通常フローで配置された“元の位置”から、下に10px・右に20pxずらす」

というイメージです。
重要なのは、“元の位置”はレイアウト上に残っている ということ。
つまり、周りの要素は「ズラす前の位置」を基準にレイアウトされています。

Tailwind で同じことを書く

<div class="relative top-2 left-5 bg-blue-100 p-4">
  ボックス
</div>
HTML

relative が position: relative;
top-2 が top: 0.5rem;
left-5 が left: 1.25rem; です。

よくある使い方1：バッジやラベルを「ちょっとだけ重ねる」

例：カードの右上に「NEW」バッジを少しはみ出して置く

ここでのキモは

  • 親に position: relative
  • 子のバッジに position: absolute

です。

CSS 版

.card {
  position: relative;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

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

.card に position: relative を付けることで、
.badge の absolute の基準が「カードの四隅」になります。

もし .card に position: relative がなかったら、
バッジは「ページ全体（body）」を基準にしてしまい、
意図した位置に乗らなくなります。

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

です。

よくある使い方2：アイコンを入力欄の中に重ねる

例：検索アイコンを input の左に重ねる

CSS 版

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

.field input {
  padding-left: 32px;
}

.field .icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}
CSS
<div class="field">
  <span class="icon">🔍</span>
  <input type="text" placeholder="キーワード検索">
</div>
HTML

position: relative を .field に付けることで、
アイコンの absolute の基準が「フィールド全体」になります。

Tailwind 版

<div class="relative inline-block">
  <span class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 text-sm">
    🔍
  </span>
  <input
    type="text"
    placeholder="キーワード検索"
    class="pl-8 pr-3 py-2 border border-gray-300 rounded text-sm"
  >
</div>
HTML

top-1/2 -translate-y-1/2 で「縦中央」に揃えています。
これも relative がないと、アイコンの位置が崩れます。

よくある使い方3：ホバー時にだけ背景を広げる

例：リンクに「下地のハイライト」を重ねる

CSS 版

.link {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  color: #1f2937;
  text-decoration: none;
}

.link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #bfdbfe;
  border-radius: 9999px;
  opacity: 0;
  transform: scale(0.9);
  transition: 0.2s;
  z-index: -1;
}

.link:hover::before {
  opacity: 1;
  transform: scale(1);
}
CSS
<a href="#" class="link">ホバーしてみてください</a>
HTML

position: relative があることで、
疑似要素 ::before の absolute が「リンクの範囲」を基準に動きます。

Tailwind 版（疑似要素は少し工夫）

Tailwind だけで疑似要素を完璧に書くのは少しトリッキーなので、
クラス＋少しの CSS を組み合わせるのが現実的です。

<a href="#" class="relative inline-block px-2 py-1 text-gray-800 link-highlight">
  ホバーしてみてください
</a>
HTML
.link-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #bfdbfe;
  border-radius: 9999px;
  opacity: 0;
  transform: scale(0.9);
  transition: 0.2s;
  z-index: -1;
}

.link-highlight:hover::before {
  opacity: 1;
  transform: scale(1);
}
CSS

ここでも、relative が「疑似要素の基準点」になっています。

position: relative を使うときの考え方（ここが一番大事）

「relative 自体は“その場にいる”」という感覚を持つ

position: relative を付けても、
その要素は通常フローから外れません。
つまり、周りのレイアウトは崩れない というのが安心ポイントです。

top / left でズラしても、
「見た目だけ動いていて、レイアウト上の“元の位置”は残っている」
というのが absolute / fixed との大きな違いです。

「子の absolute の“基準点”を作るために付ける」ことが多い

実務では、relative を単体で使うよりも

  • 親：relative
  • 子：absolute

のセットで使うことが圧倒的に多いです。

「この中で絶対配置したいものがある」
と思ったら、その親に relative を付ける、という癖をつけるといいです。

Tailwind では「relative はとりあえず付けておく」くらいでOKな場面も多い

カード、ボタン、入力フィールドなど、
「中に何かを重ねるかもしれない」要素には、
最初から relative を付けておくのもよくあるパターンです。

<div class="relative bg-white p-4 rounded shadow">
  ...
</div>
HTML

あとからバッジやオーバーレイを追加したくなったとき、
すぐに absolute を使える“土台”になります。

まとめ

position: relative は

  • 自分は通常フローの位置にいながら、top / left で少しだけズラせる
  • 子要素（absolute）の「基準点」になる

この2つが本質です。

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をコピーしました