【完全保存版】CSS positionの使い方まとめ｜relative・absolute・fixed・stickyを初心者向けに徹底解説

CSSを学び始めると、必ず出てくるのが position というプロパティです。

positionを指定したらレイアウトが崩れた
absoluteを使ったら要素がどこかへ消えた
relativeとabsoluteの違いが分からない

この記事では、「css position」で検索した初心者の方に向けて、
positionの基本概念から、各値の違い、実務での正しい使い方までを
順を追って分かりやすく解説します。

CSS positionとは何か

CSSの position は、
要素をどの基準で、どのように配置するかを決めるプロパティです。

positionを使うことで、次のようなことが可能になります。

要素を好きな位置に移動する
画面に固定表示する
親要素を基準に配置する
スクロールに応じて動かす

まずは、positionの種類を押さえましょう。

positionの種類一覧

CSS positionには、主に次の5種類があります。

値	役割
static	初期値（何もしない）
relative	自分自身を基準に移動
absolute	親要素を基準に配置
fixed	画面を基準に固定
sticky	スクロールに応じて固定

この違いを理解することが、position攻略の鍵です。

position: static（初期状態）

.box {
  position: static;
}

特徴

すべての要素の初期値
top / left などは効かない
通常のHTMLの流れ通りに配置される

基本的に、
意識して使うことはほぼありません。

position: relative（相対配置）

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

特徴

元の位置を基準に移動する
移動しても「元の場所」は保持される
absoluteの基準として使われる

よくある使い方

absolute要素の基準作り
少しだけ位置をずらしたい場合

position: absolute（絶対配置）

.child {
  position: absolute;
  top: 0;
  right: 0;
}

特徴

親要素を基準に配置される
親に position が指定されていない場合は、画面全体が基準になる
通常のレイアウトの流れから外れる

正しい使い方（重要）

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
}

absoluteを使うときは、親にrelativeを指定する
これが最重要ルールです。

position: fixed（画面固定）

.header {
  position: fixed;
  top: 0;
  left: 0;
}

特徴

画面（viewport）を基準に固定
スクロールしても位置が変わらない

よくある使用例

ヘッダー固定
フローティングボタン
ページトップへ戻るボタン

position: sticky（スクロール追従）

.menu {
  position: sticky;
  top: 0;
}

特徴

通常はrelativeのように動く
指定位置に来るとfixedのように固定される

注意点

親要素の高さが必要
overflow: hidden があると効かない場合がある

top / right / bottom / left の使い方

positionとセットで使うのが、位置指定プロパティです。

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

ポイント

positionを指定しないと効かない
数値はpx / % / rem などが使える

positionでよくある失敗例

absoluteを使ったら要素が消えた

原因：

親要素に position が指定されていない

解決策：

.parent {
  position: relative;
}

fixedを使ったら下の要素が隠れた

.header {
  position: fixed;
  height: 60px;
}

解決策：

body {
  padding-top: 60px;
}

positionとz-indexの関係

positionを使うと、
重なり順（z-index） が関係してきます。

.box {
  position: relative;
  z-index: 10;
}

注意点

z-indexはposition指定が必要
数字が大きいほど前に表示される

positionはいつ使うべきか

次のような場合にpositionが適しています。

親要素の中で自由に配置したい
画面に固定したUIを作りたい
装飾的な要素を重ねたい

一方で、
通常のレイアウトにはFlexboxやGridを使う方が安全です。

初心者におすすめの考え方

レイアウト → Flexbox / Grid
位置調整・装飾 → position

この役割分担を意識すると、
レイアウト崩れが激減します。

よくある質問

relativeとabsoluteは必ずセットですか

absoluteを使う場合、
ほとんどのケースで親にrelativeを指定します。

stickyが効かないのはなぜですか

親に高さがない
overflowが指定されている

この2点を確認してください。

まとめ

CSS positionは、
理解すれば非常に強力な配置手段です。

relative：基準作り
absolute：親基準の自由配置
fixed：画面固定
sticky：スクロール追従

「css position」で検索した方は、
まず relativeとabsoluteの関係 をしっかり理解することから始めてください。
positionを正しく使えるようになると、CSSレイアウトの幅が一気に広がります。

【完全保存版】CSS positionの使い方まとめ｜relative・absolute・fixed・stickyを初心者向けに徹底解説