なぜCSS positionは「分かったつもり」になりやすいのか？
position: absolute; を指定したら、要素が画面の左上に飛んだ…
こんな経験、私たちなら一度はありますよね。
CSS position は、文法自体はシンプルなのに、実装でハマりやすい代表格です。
よくあるつまずきは、次の3つです。
（CSSレイアウトの基礎やFlexbox・Gridとの違いについては『CSS GridとFlexbox徹底比較！違い・使い分け・選び方完全ガイド【2025年版】』をご参照ください）
- absolute を使ったら要素が消えた
- 親要素を基準にしたつもりが、意図しない位置になる
- z-index を指定しても前面に来ない
一見バラバラな問題に見えますが、
原因はすべて共通しています。
positionは「基準点」と「文書フロー」を理解しないと必ず崩れます。
用語解説：position
CSSで要素の配置方法を指定するプロパティ。relative, absolute, fixed, sticky, staticの5種類がある。用語解説：基準点
要素を配置する際の「基準となる位置」。absoluteは親要素、relativeは自分自身の元の位置が基準点になる。用語解説：文書フロー
HTML要素が通常どおり並ぶ流れ。absoluteやfixedはこの流れから外れて自由に配置される。用語解説：z-index
要素の重なり順を指定するプロパティ。positionがstatic以外でないと効果が出ない。
【結論先出し】relativeとabsoluteの違いはこれだけ
まずは結論から押さえましょう。
（positionプロパティの使い分けや失敗例については『CSS padding margin使い分け完全ガイド｜失敗例とベストプラクティス』もご参照ください）
一発で分かる比較表
| 項目 | relative | absolute |
|---|---|---|
| 基準点 | 自分自身の元の位置 | static以外の親要素 |
| 文書フロー | 維持される | 切り離される |
| 主な役割 | 基準点を作る | 自由に配置する |
黄金ルール
absoluteの子には、relativeの親
用語解説：relative
自分自身の元の位置を基準に、位置を調整できる。absoluteの基準点にもなる。用語解説：absolute
親要素（static以外）を基準に、文書フローから切り離して自由に配置できる。用語解説：static
positionの初期値。特別な配置はされず、z-indexも効かない。
この記事では、このルールを
「実務で迷わず使える状態」まで落とし込みます。
positionプロパティ5種を「使い道」で理解する
static / relative / absolute
- static
初期状態。基準点にはなりません。 - relative
自分は動かさず、子のabsoluteの基準点になる。 - absolute
親を基準に、文書フローを無視して配置。
fixed / sticky
- fixed
画面（ビューポート）基準。固定ヘッダーなど。 - sticky
親要素の範囲内でのみ固定。目次向き。
用語解説：fixed
画面（ビューポート）を基準に、スクロールしても常に同じ位置に表示される。用語解説：sticky
親要素の範囲内でのみ固定される。スクロールに応じて動き、目次やサイドバーに使われる。
コピペで使える！positionレイアウト判断テンプレ3種【最重要】
テンプレ①：親基準で配置したいとき
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
if 親の中で配置したい
then 親：relative / 子：absolute
テンプレ②：要素を完全中央揃えしたいとき
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Flexboxが使えない場面での最終解です。
テンプレ③：z-indexを効かせたいとき
.layer {
position: relative;
z-index: 10;
}
position: static のままでは z-indexは一切効きません。
【検証用】HTMLで動かして理解するpositionサンプル10選
以下は、すべて単体HTMLとして保存・実行可能です。
私たちが実務でよく使うパターンだけを厳選しています。
（CSSアニメーションや動的なレイアウトについては『Web制作で使えるCSSアニメーション10選｜サンプルコード＆使い方解説』もご参照ください）
サンプル①：relative + absolute 基本形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.parent { position: relative; width: 300px; height: 200px; border: 2px solid #333; }
.child { position: absolute; bottom: 10px; right: 10px; background: orange; padding: 8px; }
</style>
</head>
<body>
<div class="parent">
親要素
<div class="child">右下</div>
</div>
</body>
</html>
サンプル②：relative無しで左上に飛ぶ失敗例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.child { position: absolute; top: 0; left: 0; background: red; padding: 8px; }
</style>
</head>
<body>
<div class="child">画面左上</div>
</body>
</html>
サンプル③：absolute完全中央揃え
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.parent { position: relative; width: 400px; height: 200px; border: 2px solid #333; }
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: lightblue; padding: 10px; }
</style>
</head>
<body>
<div class="parent">
<div class="child">中央</div>
</div>
</body>
</html>
サンプル④：画像＋テキスト重ね（LP定番）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.container { position: relative; width: 400px; }
.container img { width: 100%; }
.text { position: absolute; bottom: 10px; left: 10px; color: white; background: rgba(0,0,0,.6); padding: 5px; }
</style>
</head>
<body>
<div class="container">
<img src="https://via.placeholder.com/400x200">
<div class="text">キャッチコピー</div>
</div>
</body>
</html>
サンプル⑤：z-indexが効く例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.box { position: absolute; width: 150px; height: 150px; }
.red { background: red; top: 20px; left: 20px; z-index: 1; }
.blue { background: blue; top: 60px; left: 60px; z-index: 2; }
</style>
</head>
<body>
<div class="box red"></div>
<div class="box blue"></div>
</body>
</html>
サンプル⑥：z-indexが効かない失敗例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.box { width: 150px; height: 150px; }
.red { background: red; z-index: 2; }
.blue { background: blue; margin-top: -100px; z-index: 1; }
</style>
</head>
<body>
<div class="box red"></div>
<div class="box blue"></div>
</body>
</html>
サンプル⑦：fixedヘッダー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
header { position: fixed; top: 0; width: 100%; background: black; color: white; padding: 10px; }
main { margin-top: 60px; }
</style>
</head>
<body>
<header>固定ヘッダー</header>
<main style="height:2000px"></main>
</body>
</html>
サンプル⑧：sticky目次
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.sidebar { position: sticky; top: 10px; background: #eee; padding: 10px; }
.container { display: flex; }
.content { height: 2000px; margin-left: 20px; }
</style>
</head>
<body>
<div class="container">
<div class="sidebar">目次</div>
<div class="content"></div>
</div>
</body>
</html>
サンプル⑨：カード右上バッジ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.card { position: relative; width: 200px; padding: 20px; border: 1px solid #333; }
.badge { position: absolute; top: -10px; right: -10px; background: red; color: white; padding: 5px; }
</style>
</head>
<body>
<div class="card">
<div class="badge">NEW</div>
カード
</div>
</body>
</html>
サンプル⑩：モーダル中央配置（完成形）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; }
</style>
</head>
<body>
<div class="overlay">
<div class="modal">モーダル</div>
</div>
</body>
</html>
positionが効かないときの即チェックリスト【保存版】
□ 親要素に position: relative があるか
□ 基準点は意図した親か
□ top / left を指定しているか
□ z-index を使う要素が static でないか
□ 幅・高さが 0 になっていないか
Flexbox / Grid / positionの使い分け結論
- 並べる・中央揃え → Flexbox
- ページ全体レイアウト → Grid
- 重ねる・基準指定 → position
positionは「最後に選ぶから強い」
用語解説：Flexbox
要素を横並び・縦並び・中央揃えなど柔軟に配置できるCSSレイアウト手法。用語解説：Grid
ページ全体のレイアウトや複雑な配置を簡単に実現できるCSSのレイアウト手法。
まとめ｜positionは怖くない。使いどころを間違えなければ最強
- relative は「基準点作成装置」
- absolute は「自由配置ツール」
迷ったら、
absoluteの子にはrelativeの親。
ぜひコードをコピペして、まずは動かしてみてください。
私たちが一番早く理解できるのは、やはり「手を動かした瞬間」です。✅
