目次
はじめに
要素を自由な位置に配置できる position プロパティ。でも「absolute を指定したら変な場所に飛んだ」「relative との関係がわからない」とつまずきがちですよね。この記事では4つの値と、つまずきの原因＆解決法をコード付きで解説します！
positionの4つの値
- static：初期値（位置指定なし）
- relative：相対配置（元の位置を基準に少しずらす／absoluteの基準にもなる）
- absolute：絶対配置（基準要素から自由に配置）
- fixed：固定配置（スクロールしても動かない）
relativeとabsoluteはセットで使う
absolute は単独で使うとページ全体が基準になり、意図しない場所に飛びます。親に relative を指定して基準を作るのが基本です。
<div class="parent">
<div class="child">右上に配置</div>
</div>.parent {
position: relative; /* ← 子要素の配置基準になる */
}
.child {
position: absolute; /* 親を基準に自由配置 */
top: 0;
right: 0;
}fixed（固定配置）
スクロールしても画面の同じ位置に固定されます。常に表示したいヘッダーなどに使います。
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}つまずきポイント
- ❌ absoluteで要素が思わぬ場所へ → 親に
position: relative;を付け忘れていないか確認 - ❌ 要素が重なって隠れる →
z-indexで重なり順を調整（数字が大きいほど手前）
スクロールに追従する「position: sticky」も便利
relative・absolute・fixedに加えて、実務でよく使うのがposition: stickyです。「普段は通常の位置にあるけれど、スクロールして一定の位置に来ると貼り付いて追従する」という、relativeとfixedのいいとこ取りの挙動をします。
.header {
position: sticky;
top: 0; /* 画面の上端で止まって追従する */
}ヘッダーの固定や、表の見出し行を残したいときに重宝します。fixedと違って元の場所のスペースを確保したまま動くので、レイアウトが崩れにくいのもポイントです。
absoluteの基準を正しく理解する
つまずきの大半は、absoluteが「positionが指定された一番近い親」を基準にするという仕組みの理解不足から起きます。親に何も指定がないと、基準がどんどん外側へ遡り、最終的に画面全体（body）が基準になって“あらぬ場所”へ飛びます。
だから「子をabsoluteで動かすなら、親にrelative」がワンセット。配置が崩れたら、まず親のrelativeを疑う——これだけで解決することがとても多いです。
まとめ
- 基本は 「親にrelative＋子にabsolute」のセット
fixedはスクロール追従の固定- 配置が崩れたら、まず基準（relative）を疑う
positionを使いこなせると、レイアウトの自由度が一気に上がります。学習や制作で詰まったら、ポートフォリオやココナラものぞいてみてくださいね。
