CSSで要素を重ねたり、右上にバッジを置いたり、画像の上にラベルを表示したりするときに登場するのがposition: relative;とposition: absolute;です。しかし、初めて使うと「なぜ画面の左上に飛んでしまうの？」「親要素にrelativeを書く理由は？」「topやleftは何を基準にしているの？」と迷いやすいポイントでもあります。CSSのrelativeとabsoluteは、要素の位置を調整するための指定です。実務では、親にposition: relative;、子にposition: absolute;を指定して、配置の基準点を作る使い方がよく使われます。
この記事では、「css relative」と調べている方に向けて、relativeとabsoluteの違い、absoluteの基準点が決まる仕組み、バッジや画像ラベルの実務コード、効かないときのチェックポイントまで解説します。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています。
CSSのpositionとは？
CSSのpositionは、要素をどのルールで配置するかを決めるプロパティです。通常のHTML要素は、上から下へ自然に並びます。この自然な並びを基準にしながら少しずらしたり、通常の流れから外して好きな位置に重ねたりするためにpositionを使います。
| 値 | 役割 | よく使う場面 |
|---|---|---|
static |
通常の配置。初期値 | 特別な位置調整をしない要素 |
relative |
元の位置を基準にずらせる | absoluteの基準点作り、少しだけ位置調整 |
absolute |
通常の流れから外して配置する | バッジ、ラベル、閉じるボタン、画像上の文字 |
fixed |
画面に固定する | 固定ヘッダー、追従ボタン |
sticky |
スクロール位置に応じて固定される | 追従見出し、テーブルの固定ヘッダー |
relativeとabsoluteを理解する近道は、「relativeは基準点を作る」「absoluteは基準点から配置する」と覚えることです。positionはレイアウトを自由にできますが、使いすぎると要素が重なったり、スマホで崩れたりしやすくなります。通常の横並びや中央揃えは、FlexboxやGridで済むことも多いです。
関連記事：「CSSで中央揃え・上下中央にする方法を解説」
position: relativeとは？元の位置を基準にずらす指定
position: relative;は、要素を通常の位置に置いたうえで、top、right、bottom、leftを使って少しずらせる指定です。
<div class="box normal">通常の位置</div>
<div class="box relative-box">relativeで移動</div>
<div class="box normal">次の要素</div>.box {
width: 180px;
padding: 16px;
margin-bottom: 12px;
background: #eef7f2;
}
.relative-box {
position: relative;
top: 12px;
left: 24px;
background: #d8ecff;
}この例では、.relative-boxが元の位置から下に12px、右に24pxずれます。
relativeでずらしても元の場所は残る
relativeの重要な特徴は、見た目の位置をずらしても、元々あった場所のスペースは残ることです。つまり、次の要素は「relativeで動いた後の位置」ではなく、「本来そこにあった位置」を基準に並びます。relativeは、要素を通常の流れに残したまま、見た目だけを少しずらす指定です。
relativeで大きく位置をずらすと、見た目とHTML上の並びがズレて管理しにくくなります。大きなレイアウト調整には使いすぎないようにしましょう。
relativeだけで使うより「absoluteの親」として使うことが多い
実務では、relative単体で要素をずらすより、次に紹介するabsoluteの基準点として使うことが多いです。たとえば、カードの右上に「NEW」バッジを置きたい場合、カードにposition: relative;を指定し、バッジにposition: absolute;を指定します。
関連記事：「【CSS】displayの違いと使い分けを図解！block/inlineからflexまで」
position: absoluteとは？基準点から自由に配置する指定
position: absolute;は、要素を通常の流れから外して、基準点からの距離で配置する指定です。top、right、bottom、leftを使うことで、基準点の上・右・下・左からどれくらい離すかを決められます。
.label {
position: absolute;
top: 16px;
right: 16px;
}この例では、基準点の右上から16px内側に.labelを配置します。
absoluteは通常の流れから外れる
absoluteを指定した要素は、通常のレイアウトの流れから外れます。
そのため、他の要素は「absoluteの要素が存在しないもの」として配置されます。バッジやラベルのように、他の要素に重ねたいパーツには便利ですが、通常の文章やカードの並びそのものを作る用途には向きません。absoluteは、通常の並びから外して、特定の位置に重ねたい要素に使います。
absoluteを使った要素は、親の高さを押し広げません。中身の高さとして計算されないため、親要素の高さがなくなるトラブルに注意しましょう。
absoluteの基準点は一番近いposition付きの親
absoluteで一番大事なのが、基準点の考え方です。absoluteは、一番近い「positionがstatic以外」の親要素を基準に配置されます。具体的には、親や祖先要素に次のいずれかが指定されていると、その要素が基準になります。
position: relative;position: absolute;position: fixed;position: sticky;
親側に何も指定していない場合、思った場所ではなく、ページ全体や別の祖先要素を基準に配置されることがあります。
relativeとabsoluteの違い
relativeとabsoluteの違いを表で整理すると、次のようになります。
| 比較 | relative | absolute |
|---|---|---|
| 通常の流れ | 残る | 外れる |
| 元のスペース | 残る | 残らない |
| 位置の基準 | 自分自身の元の位置 | 一番近いposition付きの親 |
| よく使う用途 | absoluteの基準点作り、少しの位置調整 | バッジ、ラベル、閉じるボタン、重ねるUI |
| 注意点 | 大きく動かすと管理しづらい | 親の高さに含まれない |
覚え方：relativeは「基準」、absoluteは「配置」
初心者の方は、まず次のように覚えると混乱しにくいです。
親：position: relative; /* ここを基準にする */
子：position: absolute; /* 基準から配置する */この組み合わせを理解すると、カードの右上バッジ、画像上のラベル、フォームのアイコンなどが作りやすくなります。
関連記事：「CSSの中央揃えとFlexboxの使い方を解説」
【コピペOK】親relative・子absoluteの基本コード
ここでは、最も実務で使う「親にrelative、子にabsolute」の基本コードを見ていきましょう。
<div class="card">
<span class="badge">NEW</span>
<h3>HTML・CSS入門講座</h3>
<p>基礎からWeb制作を学べる講座です。</p>
</div>.card {
position: relative;
padding: 32px 24px 24px;
border: 1px solid #d7e1e8;
background: #fff;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
background: #d94645;
color: #fff;
font-size: 12px;
font-weight: bold;
}このコードでは、.cardにposition: relative;を指定しているため、.badgeのtop: 12px;とright: 12px;はカードを基準に計算されます。absoluteで右上にパーツを置きたい場合は、まず親要素にposition: relative;があるか確認しましょう。
top・right・bottom・leftの使い分け
absoluteでは、どの角を基準に置きたいかによって指定を変えます。
| 配置したい場所 | CSSの例 | 使う場面 |
|---|---|---|
| 右上 | top: 12px; right: 12px; |
NEWバッジ、閉じるボタン |
| 左上 | top: 12px; left: 12px; |
カテゴリラベル |
| 右下 | bottom: 12px; right: 12px; |
画像の補足ラベル |
| 中央 | top: 50%; left: 50%; transform: translate(-50%, -50%); |
画像上の中央テキスト、モーダル |
topとbottom、leftとrightを同時に指定すると、意図が読みにくくなる場合があります。まずは基準にしたい角を決めて、必要な方向だけ指定しましょう。
実務例1：画像の上にラベルを重ねる
商品画像や記事サムネイルの上に「初心者向け」「無料」などのラベルを重ねたい場合も、親relative・子absoluteが使えます。
<figure class="course-thumb">
<img src="course.jpg" alt="HTMLとCSSを学習している画面">
<figcaption class="thumb-label">初心者向け</figcaption>
</figure>.course-thumb {
position: relative;
margin: 0;
}
.course-thumb img {
display: block;
width: 100%;
}
.thumb-label {
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
font-size: 13px;
}この例では、figureを基準にして、画像の左下にfigcaptionを配置しています。
画像にはdisplay: blockを指定すると余白が出にくい
画像を使うときは、imgにdisplay: block;を指定しておくと、画像下の微妙な余白を防ぎやすくなります。
.course-thumb img {
display: block;
width: 100%;
}画像の上に文字を重ねる場合、文字が画像と同化して読みにくくなることがあります。背景色や影を付けて、読みやすさを確保しましょう。
実務例2：カードの右上にバッジを置く
カード型UIでは、「おすすめ」「NEW」「人気」などのバッジを右上に置く場面がよくあります。
<article class="lesson-card">
<span class="lesson-badge">人気</span>
<h3>CSS基礎講座</h3>
<p>レイアウトの基本を学べます。</p>
</article>.lesson-card {
position: relative;
padding: 40px 24px 24px;
border: 1px solid #d8e2ea;
}
.lesson-badge {
position: absolute;
top: 0;
right: 0;
padding: 6px 12px;
background: #1f7a8c;
color: #fff;
}バッジがカード本文に重なる場合は、親側のpadding-topを少し大きめに取ると読みやすくなります。absoluteで重ねるパーツを置くときは、本文と重ならないように親要素の余白も一緒に調整しましょう。
よくあるトラブル：absoluteが思った位置に来ない原因
relativeとabsoluteでつまずいたときは、次のポイントを確認しましょう。
原因1：親にposition: relative;がない
最も多い原因が、親要素にposition: relative;を指定していないケースです。
.card {
padding: 24px;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
}この場合、.badgeは.cardではなく、別の基準を探して配置されます。
.card {
position: relative;
padding: 24px;
}原因2：absoluteにした要素が親の高さに含まれていない
absoluteの要素は通常の流れから外れるため、親要素の高さを作りません。たとえば、親の中身がabsoluteの要素だけだと、親の高さが0に近くなり、背景や枠線が見えなくなることがあります。
親要素の高さが必要な場合は、通常の流れに残る要素を入れるか、親にpaddingやmin-heightを指定しましょう。
原因3：z-indexを指定していない
重ねた要素が後ろに隠れる場合は、z-indexを確認します。
.badge {
position: absolute;
z-index: 2;
}z-indexは、重なり順を指定するプロパティです。値が大きい要素ほど前面に表示されやすくなります。
z-indexは、positionが効いている要素やflex/gridの子要素などで効き方が変わります。効かないときは、親要素のpositionや重なりの階層も確認しましょう。
関連記事：「【CSS】displayの違いと使い分けを図解！block/inlineからflexまで」
relative・absolute・fixed・stickyの使い分け
positionにはrelativeとabsolute以外にも、fixedやstickyがあります。混同しやすいため、使い分けを整理しておきましょう。
| 指定 | 特徴 | 使う場面 |
|---|---|---|
relative |
元の位置を基準にずらす。absoluteの基準点にもなる | 基準点作り |
absolute |
通常の流れから外れて、基準点から配置する | バッジ、ラベル、重ねるパーツ |
fixed |
画面に固定される | 追従CTA、固定ヘッダー |
sticky |
スクロールに応じて途中から固定される | 追従見出し、サイドバー |
通常のレイアウトを整えるだけなら、まずはdisplay、margin、Flexbox、Gridを検討しましょう。要素を重ねたい、特定の角に置きたい、通常の流れから外したい場合にpositionを使うと、CSSが整理しやすくなります。
公式ドキュメントも確認する
positionやz-indexの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。
- HTML・CSSを学んで自分だけのスキルを身につけたい
- HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
まとめ：relativeは基準点、absoluteは基準点から配置
この記事では、CSSのposition: relative;とposition: absolute;について解説しました。relativeは元の位置を基準にした指定で、実務ではabsoluteの基準点を作るためによく使われます。absoluteは通常の流れから外れ、一番近いposition付きの親を基準に配置されます。
まずは次の形を覚えておきましょう。
.parent {
position: relative;
}
.child {
position: absolute;
top: 12px;
right: 12px;
}この組み合わせを使えるようになると、カードの右上バッジ、画像上のラベル、閉じるボタン、通知マークなど、実務でよく使うUIを作りやすくなります。
ただし、通常の横並びや中央揃えまでpositionで作ろうとすると、スマホ対応や保守が難しくなります。レイアウト全体はFlexboxやGrid、重ねるパーツはrelativeとabsoluteというように、役割を分けて使いましょう。
オススメ：HTML・CSSの基礎を無料で学べる初心者向け講座はこちら
関連記事：「CSSの中央揃え・上下中央にする方法を解説」
