この記事の目次
CSS positionの使い方とは
position は、要素の配置方法を決めるプロパティです。top right bottom left と組み合わせて使います。値によって、どこを基準にするかと通常の流れ（レイアウトの場所取り）に残るかが変わります。特に absolute は、親に position: relative を付けないと、意図しない場所を基準にします。
基本（構文・仕組み）
| 値 | 基準 | 場所取り |
|---|---|---|
| static（初期値） | 通常の流れ。top などは無効 | あり |
| relative | 本来の位置からずらす | 元の場所を残す |
| absolute | 最も近い position 指定のある祖先 | なし（流れから外れる） |
| fixed | ビューポート | なし |
| sticky | 通常の位置とスクロール位置の間 | あり |
absolute の基準は、「static 以外の祖先」のうち、最も近いものです。見つからないと、初期の包含ブロック（ほぼ画面全体）が基準になります。そのため、カードにバッジを重ねたいときは、カードに position: relative、バッジに position: absolute を書くのが定番です。
.card { position: relative; }
.badge {
position: absolute;
top: -10px;
right: -10px;
}
fixed は、祖先に transform perspective filter があると、その祖先が基準になることがあります。sticky は別記事 position: sticky にまとめています。
サンプルコード（実行結果つき）
<style>
.card { width: 240px; height: 120px; margin: 40px; position: relative; background: #def; }
.nopos { width: 240px; height: 120px; margin: 40px; background: #fed; }
.badge { position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; background: #e33; border-radius: 50%; }
</style>
<div class="card">card<span class="badge">1</span></div>
<div class="nopos">no position<span class="badge">2</span></div>
動作確認（検証環境と結果）
- 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/
render.ps1+getBoundingClientRect() - ファイル:
C:Tempks2techtestst2position.html
| バッジ | 結果 |
|---|---|
| 1（親に relative） | 親の右端より10px外側、上端より10px上に配置された |
| 2（親に position なし） | 親ではなく画面の右上を基準にし、画面右端から10pxはみ出した（本来の位置から大きく外れた） |
バッジ2のずれは、親に position: relative が無いことが原因です。
CSS positionの使い方の注意点
absoluteの要素は高さを持たないため、親の高さが0に潰れることがあります。relativeを付けただけでは、見た目は変わりません。基準を作る目的で使うことが多い設定です。positionを指定した要素にはz-indexが効きます。重なり順は CSSのz-indexプロパティによる重なり順は『箱』を基準に決まる も参照してください。fixedのヘッダーは、本文を隠します。ヘッダー分の余白（padding-topなど）を本文側に確保します。
CSS positionの使い方でよくあるミス
- 親に
relativeを付け忘れ、バッジやアイコンが画面端に飛ぶ。 absoluteで中央寄せを作ろうとして、left: 50%だけで止める（transform: translateX(-50%)やinset: 0; margin: autoを併用する）。absoluteを多用して、レスポンシブで崩れる。通常の配置は Flexbox や Grid に任せるほうが安定します。- スマホで
fixedの要素が、アドレスバーの出し入れでずれる。
ブラウザ対応・バージョン
static relative absolute fixed は、すべての主要ブラウザで長く使える機能です。sticky は、対応が後から広がりました。MDN の Browser compatibility で、対象環境を確認してください。
CSS positionの使い方のチェックリスト
absoluteを使う前に、基準となる親にposition: relativeを付けたか。- 重ねる要素の
z-indexを、整理して決めたか。 - 画面幅390pxと1200pxで、位置を確認したか。
- 通常配置で済む場面で、
absoluteを使っていないか。
CSS positionの使い方のFAQ（よくある質問）
Q. relative と absolute の違いは？
A. relative は元の場所を残してずらします。absolute は流れから外れ、基準の祖先に対して位置を決めます。
Q. top を指定したのにずれません。
A. position: static のままの可能性があります。static では top などが無効です。
Q. 要素の中央に重ねるには？
A. inset: 0; margin: auto; に幅・高さを組み合わせるか、親を Grid にして place-items: center にします。CSS中央寄せ を参照してください。
筆者の見解（CSS positionの使い方）
position: absolute は強力な反面、使う場所を絞ったほうが保守しやすいと考えます。バッジ、閉じるボタン、画像上のキャプションなど「何かの上に重ねる」場面に限定し、段組みや並びは Flexbox・Grid に任せる、という使い分けがおすすめです。
