relativeとabsoluteで重ねる

カードの右上についた「NEW」バッジ、画像に重なった見出し、ボタンのすみの「×」印——。Webでよく見るこうした”重ね”は、ほとんどが absolute と relative の合わせ技でできています。使いどころがとても多いので、パターンごと覚えてしまいましょう。

absoluteは「基準」をさがして浮く

position: absolute; をつけた部品は、ふつうの流れから外れて宙に浮きます。このとき「どこを基準に浮くか」がとても大事。基準になるのは、いちばん近い”position指定のある親”です。もし基準がどこにもないと、なんと画面全体を基準に飛んでいってしまいます。

そこで、基準にしたい親にだけ position: relative; をつけて、「ここを基準にしてね」と教えてあげるわけです。

合わせ技：カードの角にバッジを置く

いちばん定番の形で見てみましょう。カード（親）の右上に、バッジ（子）を重ねます。

<div class="card">
  <span class="badge">NEW</span>
  <p>新しい記事です</p>
</div>

.card {
  position: relative;   /* ← これが「基準」になる */
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;           /* カードの右上に重ねる */
}

.card に relative をつけたことで、.badge はそのカードの中を基準に浮きます。top と right で「上から8px、右から8px」＝右上の角に、ピタッと収まります。top・right・bottom・left の組み合わせで、四隅でも中央でも自由に置けます。

こんなときに使う

この合わせ技は、とにかく出番が多いです。

• カードの角に「NEW」「SALE」などのバッジ
• 画像の上に、タイトルの文字を重ねる
• ボタンやパネルのすみに、閉じる「×」ボタン
• アイコンの右上に、通知の赤い丸

このレッスンのまとめ

1. absolute はふつうの流れから外れ、いちばん近いposition指定の親を基準に浮く
2. 親に position: relative;＋子に position: absolute; で、中に重ねて置ける
3. top・right・bottom・left で、四隅など狙った場所に配置

これでCSSコースはひと区切り。色・文字・装飾から、大きさ・並べ方・重ね方まで——ページの見た目を、ひととおり自分の手で組めるようになりました。骨組み（HTML）に思いどおりの服を着せ、部品を自在に並べ、狙った場所に重ねる。ここまで来れば、もう立派な作り手です。