HTML/CSS：位置指定（position）
1学習の目的
- 要素を通常の流れから外し、好きな位置に配置・重ねることができるようになる。バッジ・オーバーレイ・固定ヘッダーが作れるようになる。
- absolute は「親の relative」を基準にするという最重要ルールを理解する。これを知らないと要素が予期しない場所へ飛んでいく。
2基礎解説
| 値 | 基準 | 使いどころ |
|---|---|---|
| static | 既定（通常の流れ） | 指定しない状態 |
| relative | 元の位置 | 基準を作る役 |
| absolute | 親の relative | バッジ・重ね |
| fixed | 画面（ビューポート） | 固定ヘッダー |
- ⭐ absolute は「親の relative」を基準にする。親に position: relative が無いと、ページ全体を基準にして遠くへ飛んでいく——position で最も多いつまずきがこれ。
- relative は「元の位置を基準にずらす」。ずらしても元の場所は空いたままで、他の要素は詰めてこない。基準を作るためだけに使うことも多い。
- absolute と fixed は通常の流れから外れる。その要素は場所を取らなくなるので、下の要素が上に詰めてくる。
- fixed は画面に固定される。スクロールしても位置が変わらないので、常時表示のヘッダーや「トップへ戻る」ボタンに使う。
- 重なり順は z-index で決まる。数値が大きいほど手前に来る。ただしposition を指定した要素にしか効かない点に注意。
現場使用例：通知バッジ、画像の上のキャプション、固定ヘッダー、モーダルウィンドウ、「トップへ戻る」ボタン。
/* relative：元の位置からずらす（場所は残る） */
.moved {
position: relative;
top: 20px;
left: 30px;
}
/* ⭐ absolute の基本形：親に relative を付ける */
.parent {
position: relative; /* これが基準になる */
width: 300px;
height: 200px;
}
.badge {
position: absolute; /* 親を基準に配置 */
top: 10px;
right: 10px;
}
/* ⚠ 親に relative が無いと画面基準になり、遠くへ飛ぶ */
/* 要素の外側にはみ出す配置（負の値） */
.notification {
position: absolute;
top: -8px;
right: -8px; /* 親の外にはみ出す */
width: 24px;
height: 24px;
border-radius: 50%;
background: red;
}
/* fixed：スクロールしても画面に固定 */
.header-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100; /* 他の要素より手前に */
}
/* 完全な中央配置（Flexboxが使えない場面で） */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* sticky：スクロールすると途中から固定 */
.sticky-nav {
position: sticky;
top: 0;
}
3基本ドリル（10問）
positionがrelative、位置がずれる
position: relative; と top / left を組み合わせる。
<style>
.moved {
position: relative;
top: 20px;
left: 30px;
width: 100px;
height: 50px;
background-color: #ccc;
}
</style>
<div class="moved">ずれた要素</div>relative はずらしても元の場所が空いたまま。他の要素は詰めてこないので、レイアウト全体には影響しない。
A. 常に画面全体 B. 親要素（position 指定があるもの） C. body D. 元の位置 選択★☆☆無料
解答 == B
最も近い position 指定のある祖先を探す。
B
親に position: relative が無いと、ページ全体が基準になる。「要素が思わぬ場所に飛んだ」原因の大半はこれ。
親の右上に配置される
親に position: relative、子に position: absolute を指定する。
<style>
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: #eee;
}
.child {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 30px;
background-color: red;
}
</style>
<div class="parent">
<div class="child"></div>
</div>親の relative と子の absolute はセットで使う。この組み合わせが position の基本パターンになる。
<style>
.parent {
position: ____;
width: 200px;
height: 100px;
}
.child {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
background: red;
}
</style>
<div class="parent"><div class="child"></div></div>子が親の右上に配置される
「相対的な」を意味する8文字の値。
relative
relative は「基準を作る」ためだけに使うことも多い。top や left を指定しなくても、子の absolute の基準になる。
A. relative B. absolute C. fixed D. static 選択★☆☆無料
解答 == C
「固定された」という意味の英単語。
C
fixed は画面（ビューポート）を基準にする。ページをスクロールしても位置が変わらないので、常時表示のヘッダーに使う。
バッジが親の外にはみ出す
負の値を指定すると親の外側にはみ出す。border-radius: 50% で丸くなる。
<style>
.parent {
position: relative;
width: 200px;
height: 100px;
background-color: #eee;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
background-color: red;
border-radius: 50%;
color: white;
text-align: center;
}
</style>
<div class="parent">
<div class="badge">3</div>
</div>負の値で親からはみ出せる。アプリの通知バッジやセール表示など、目立たせたい要素に使う定番の手法。
<style>
.front {
position: relative;
____: 10;
background: blue;
}
</style>
<div class="front">手前</div>z-index が10
「重なりの番号」を意味する7文字のプロパティ（ハイフン含む）。
z-index
数値が大きいほど手前に来る。ただし position を指定した要素にしか効かない点に注意する。
A. 元の場所が残る B. 通常の流れから外れ、場所を取らなくなる C. 幅が0になる D. 消える 選択★★☆広告解放
解答 == B
relative との違いを考える。
B
下の要素が詰めて上に来る。relative は場所が残るが、absolute は浮いた状態になるので扱いが違う。
positionがfixed、上部に固定
position: fixed; top: 0; left: 0; width: 100%; と書く。
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #ffffff;
z-index: 100;
}
</style>
<div class="header">固定ヘッダー</div>
<div style="height: 1000px; padding-top: 60px;">長いコンテンツ</div>本文に上余白を付けるのを忘れない。fixed は場所を取らないので、指定しないとヘッダーの下にコンテンツが隠れる。
親の中央に配置される
top: 50%; left: 50%; transform: translate(-50%, -50%); の3点セット。
<style>
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: #eee;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 40px;
background-color: #ccc;
}
</style>
<div class="parent">
<div class="center">中央</div>
</div>50%だけでは要素の左上が中央に来るので、transform で自身の半分だけ戻す。Flexboxが使えない場面での中央揃えの定番。
4実践シナリオ（5問）
帯が親の下部に配置される
bottom: 0; left: 0; width: 100%; で下部いっぱいに配置する。
<style>
.photo {
position: relative;
width: 300px;
height: 200px;
background-color: #999;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: 10px;
box-sizing: border-box;
}
</style>
<div class="photo">
<div class="caption">店内の様子</div>
</div>写真の上に文字を載せる定番の手法。HT10で学んだ rgba と組み合わせることで、写真が透けつつ文字が読める状態になる。
ラベルが左上に配置される
top: 0; left: 0; で親の左上に配置する。
<style>
.card {
position: relative;
width: 200px;
height: 150px;
border: 1px solid #ddd;
}
.label {
position: absolute;
top: 0;
left: 0;
padding: 4px 12px;
background-color: red;
color: #ffffff;
font-size: 0.875rem;
}
</style>
<div class="card">
<div class="label">SALE</div>
</div>ECサイトで頻出のパターン。カードのレイアウトを崩さずに、目立つラベルを重ねられる。
z-indexが正しく設定される
通常は後の要素が手前に来るが、z-index で逆転できる。
<style>
.box {
position: relative;
width: 120px;
height: 120px;
}
.front {
z-index: 2;
background-color: #0066cc;
}
.back {
z-index: 1;
background-color: red;
margin-top: -60px;
margin-left: 40px;
}
</style>
<div class="box front">手前</div>
<div class="box back">奥</div>z-index で表示順を逆転できる。HTMLの順序に関係なく、数値の大きいほうが手前に来る。
fixedで右下に配置
bottom と right を指定する。border-radius: 50% で円形になる。
<style>
.to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #0066cc;
color: #ffffff;
border: none;
border-radius: 50%;
z-index: 50;
}
</style>
<div style="height: 1500px;">長いコンテンツ</div>
<button class="to-top">↑</button>スクロールしても右下に留まる。長いページでは、ユーザーが上に戻る手間を大きく減らせる。
オーバーレイと中央のボックス
オーバーレイ自体を Flexbox にすると、中身を簡単に中央配置できる。
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
box-sizing: border-box;
}
</style>
<div class="overlay">
<div class="modal">
<h3>お知らせ</h3>
<p>モーダルウィンドウの中身です。</p>
</div>
</div>これがモーダルウィンドウの基本構造。fixed で画面を覆い、その中を Flexbox で中央揃えにする——position と Flexbox の組み合わせ技。
5仕上げ課題
① 固定ヘッダー（.header）
・position: fixed、上0・左0、幅100%、高さ 56px
・背景 #0066cc、文字色白、z-index: 100
② 商品カード（.card）
・position: relative、幅 240px、高さ 180px、枠線 1px solid #ddd
・中に3つの絶対配置要素：
- .label：左上（上0・左0）、背景赤・文字白・padding 4px 12px
- .badge：右上にはみ出す（上 -8px・右 -8px）、24×24px、円形、背景 #ff6600
- .caption：下部いっぱい（下0・左0、幅100%）、背景 rgba(0,0,0,0.6)、文字白、padding 8px、box-sizing
③ トップへ戻るボタン（.to-top）
・position: fixed、下 20px・右 20px、48×48px、円形、z-index: 50
HTML：header、div.card（中に3要素）、button.to-top
※ カードには margin-top: 80px を付けて、固定ヘッダーに隠れないようにすること 総合★★★広告解放
すべてのpositionと配置が正しい
カードに position: relative を付けないと、中の absolute 要素が画面基準になって飛んでいく。badge の負の値でカードの外にはみ出す。
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 56px;
background-color: #0066cc;
color: #ffffff;
z-index: 100;
display: flex;
align-items: center;
padding: 0 20px;
}
.card {
position: relative;
width: 240px;
height: 180px;
border: 1px solid #ddd;
margin-top: 80px;
margin-left: 20px;
}
.label {
position: absolute;
top: 0;
left: 0;
padding: 4px 12px;
background-color: red;
color: #ffffff;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
background-color: #ff6600;
color: #ffffff;
border-radius: 50%;
text-align: center;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: 8px;
}
.to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 48px;
height: 48px;
background-color: #0066cc;
color: #ffffff;
border: none;
border-radius: 50%;
z-index: 50;
}
</style>
<div class="header">ゼロカラショップ</div>
<div class="card">
<div class="label">SALE</div>
<div class="badge">3</div>
<div class="caption">ノートPC 128,000円</div>
</div>
<button class="to-top">↑</button>このカードには、position の使い方が凝縮されている。ラベルは左上、バッジは右上にはみ出し、キャプションは下部いっぱい——3つとも同じ親を基準にしながら、まったく違う位置に配置されている。
ここで最も重要なのは .card { position: relative; } の1行だ。もしこれを書き忘れると、3つの絶対配置要素はすべてページ全体を基準にしてしまい、画面の左上や右上へ飛んでいく。カードのどこにも表示されない——position で最も多い失敗がこれで、原因が分かりにくい。
.badge の top: -8px; right: -8px; という負の値にも注目してほしい。親の枠の外にはみ出して配置できるので、通知の数や「NEW」といった表示を目立たせられる。overflow: hidden が親に付いていると切れてしまう点だけ注意する。
そして .card { margin-top: 80px; } だ。fixed の要素は場所を取らないため、これが無いとカードがヘッダーの下に潜り込んで見えなくなる。固定ヘッダーを使うなら、本文に必ず上余白を確保する——セットで覚えておく。
次章では装飾と動きを扱う。影・グラデーション・トランジションを加えると、ページが一気に「完成品」らしくなる。