問題1: absoluteが効かない

問題

position: absoluteとtop: 0; right: 0;を指定したのに、要素が親要素の右上ではなく、ページの右上に配置されてしまいます。

HTML

<div class="container">
  <h2>カードタイトル</h2>
  <span class="badge">New</span>
  <p>カードの内容がここに入ります。</p>
</div>

CSS

.container {
  /* position指定なし */
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
  border: 2px solid #ddd;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #FF5722;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
}

実行結果

カードタイトル

New

カードの内容がここに入ります。

※ バッジがページの右上に飛んでしまいます（実際の挙動を想定）

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

position: absoluteの要素は、最も近い位置指定された祖先要素を基準に配置されます。

位置指定された要素とは、positionがstatic以外の値を持つ要素です。

親要素に適切なposition値が設定されているか確認しましょう。

解答

クリックして解答を表示

問題の原因

親要素（.container）にposition指定がないため、position: absoluteの要素は、位置指定された祖先要素を探し続け、最終的にビューポート（ページ全体）を基準にしてしまいます。

absoluteの基準要素の探索

  1. 直接の親要素を確認
  2. positionがstatic（デフォルト）なら、その親要素を確認
  3. この探索を繰り返し、position指定された要素を探す
  4. 見つからない場合は、ビューポートが基準になる

位置指定された要素：position が relative / absolute / fixed / sticky のいずれか

修正方法

親要素にposition: relativeを追加

.container {
  position: relative;  /* 追加 */
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
  border: 2px solid #ddd;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #FF5722;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
}
修正後の結果

カードタイトル

New

カードの内容がここに入ります。

positionの値と特性

値 特性 基準 使用場面
static デフォルト値 通常フロー 位置調整不要な要素
relative 相対配置 元の位置 微調整、子要素の基準
absolute 絶対配置 位置指定された親 オーバーレイ、バッジ
fixed 固定配置 ビューポート 固定ヘッダー、FAB
sticky 粘着配置 スクロールコンテナ 追従ヘッダー

よくある配置パターン

/* カード内のバッジ */
.card {
  position: relative;
}
.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 中央配置（古典的方法） */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* コーナー配置 */
.top-left { top: 0; left: 0; }
.top-right { top: 0; right: 0; }
.bottom-left { bottom: 0; left: 0; }
.bottom-right { bottom: 0; right: 0; }

覚えておくポイント

  • position: absoluteは位置指定された親要素が必要
  • 親にposition: relativeを付けるのが最も一般的
  • relativeは元の位置を保持するため、レイアウトへの影響が少ない
  • 複数の階層がある場合、最も近い位置指定された要素が基準
  • 基準要素が見つからない場合はビューポートが基準