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」などのバッジ
• 画像の上に、タイトルの文字を重ねる
• ボタンやパネルのすみに、閉じる「×」ボタン
• アイコンの右上に、通知の赤い丸

画像いっぱいに重ねる：四辺を全部0にする

バッジは四隅の1点に置く使い方でしたが、top・right・bottom・leftを全部0にすると、子を親とまったく同じ大きさに重ねられます。写真いっぱいにキャプションを敷きたいときの定番です。

<figure class="photo">
  <img src="view.jpg" alt="窓からの景色">
  <figcaption class="caption">今日の空</figcaption>
</figure>

.photo {
  position: relative;
}
.caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: white;
}

top: 0; right: 0; bottom: 0; left: 0;で、.captionは.photoとぴったり同じ範囲に重なります。あとはdisplay: flex;とalign-items: flex-end;で、中の文字を好きな位置（ここでは下端）に寄せれば完成です。四隅の1点だけでなく、面ごと重ねることもできると覚えておきましょう。

実際に組むと、こうなります。

このレッスンのまとめ

1. absolute はふつうの流れから外れ、いちばん近いposition指定の親を基準に浮く
2. 親に position: relative;＋子に position: absolute; で、中に重ねて置ける
3. top・right・bottom・left で、四隅から面いっぱいまで、狙った場所に配置
4. 重なる順番を変えたいときは z-index（数字が大きいほど手前）

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