Webサイト制作で必ず出てくるのが CSS の position プロパティ。
中でも relative（相対配置）と absolute（絶対配置）は、「基準を作る」と「その基準に合わせて配置する」という関係性でよく使われます。

この記事では、CSS の relative と absolute の基礎、違い、実際の使いどころ、注意点をまとめて解説します。CodePen で動かせるサンプルも用意しているので、手を動かしながら学べます。

position とは？ relative・absolute を理解する前に

position は要素の配置方法を指定するプロパティです。
値には static（初期値）、relative、absolute、fixed、sticky などがありますが、まずは最も基本的な relative と absolute を理解することが重要です。

注意点

• absolute を使うと要素はフローから外れるため、他の要素に重なったり、思わぬ崩れを起こすことがあります。
• 親要素に position を付け忘れると、基準が body になってしまい意図しない場所に配置されるケースが多いです。

メリット

• 相対配置・絶対配置を組み合わせると、矢印やバッジ、キャプション、モーダルなど「狙った位置に要素を置く UI」が実現しやすくなります。
• レイアウトの自由度が高まり、デザインの幅が広がります。

relative・absolute の基礎

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

relative特徴

• 自分の本来の位置を基準にオフセットされる。
• 元のスペースはそのまま残る → レイアウトの流れは崩れにくい。
• 「ずらす」用途のほか、absolute の基準となる役割が大きい。

absolute特徴

• 一番近い position を持つ親要素を基準に配置される。
• 親に指定がなければ body を基準にする。
• フローから外れるため、要素同士が重なりやすい。z-index と組み合わせて使うことが多い。

実務でよくある使いどころ

ボタンや画像に重ねる使い方を紹介します。

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

ボタンに矢印を付ける場合

ユーザーがリンクやボタンを見たときに「クリックできる」ことを直感的に伝えるために、矢印アイコンを右端に配置するデザインはとてもよく使われます。
このとき、テキストとアイコンをきれいに揃えるために btn に relative、矢印（擬似要素）に absolute を指定します。

画像にキャプションを重ねる場合

Webサイトでは、写真やサムネイルの上にテキストを重ねて情報を補足することが多いです。
この場合も、親要素（カード）に relative、キャプションに absolute を指定します。

キャプションは 親要素（画像枠）の中央を基準に配置されるため、画像サイズが変わっても常に中央に表示されます。
さらに背景を半透明にすると、写真を活かしつつ文字を読みやすくできます。

→　実務的には バナー、カードデザイン、サムネイルの説明文 などで頻出するテクニックです。

まとめ

• relative は「基準を作る／位置をずらす」
• absolute は「基準に合わせて配置する」
• よくあるパターンは「親に relative、子に absolute」
• absolute はフローから外れるため、レイアウト崩れに注意
• レスポンシブ対応やアニメーション時は transform を活用するとスムーズ

relative と absolute を正しく使い分けることで、Webデザインの自由度が一気に広がります。ぜひ CodePen のサンプルを触りながら試してみてください。

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。