CSS「position」の使い方を完全マスター｜初心者向けに図で徹底解説！

こんにちは、SouDogです。

CSSの中でも「position」は多くの初心者が最初につまづくポイントの一つです。レイアウトを調整しようと思ったら思った通りに動かない、表示がおかしくなる……そんな経験をされた方も多いのではないでしょうか？

この記事では、CSSの「position」プロパティについて、初めての方でも理解できるように図解やサンプルコードを交えて丁寧に解説していきます。

positionプロパティは、要素の配置方法を指定するためのCSSプロパティです。これを使うことで、ページ内のどこに、どのように要素を配置するかをコントロールできます。

.example {
  position: relative;
  top: 20px;
  left: 30px;
}

このように、positionに値を指定し、top・right・bottom・leftなどのプロパティで実際の位置を設定します。

値	意味
static	初期値（特別な位置指定をしない）
relative	自分の元の位置を基準に移動できる
absolute	一番近い”position指定された親要素”を基準に配置
fixed	ビューポート（画面）に対して固定される
sticky	スクロール位置によって動いたり固定されたりする

最も基本的な状態で、何もpositionを指定しないとstaticになります。

.example {
  /* position: static; ←書かなくてもこれが適用される */
}

この状態では、要素はHTMLで書かれた順番どおりに上から順に表示されます。topやleftなどは無効になります。

relativeは「自分が元々あった位置」を基準に移動できます。

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

この場合、元の場所から「下に10px、右に20px」ずれて表示されます。スペース自体は元の場所のままなので、他の要素のレイアウトには影響しません。

📝 補足図（イメージ）：

[ 元の場所 ] → □
[ 表示位置 ] →     □（10px下、20px右）

absoluteは「一番近いposition指定された親要素」を基準にして配置されます。

.wrapper {
  position: relative;
}
.child {
  position: absolute;
  top: 10px;
  left: 10px;
}

.wrapperがrelativeなので、.childは.wrapperの左上から10px・10pxの位置に配置されます。

📝 注意点：親要素にpositionが指定されていない場合、bodyを基準にしてしまうことがあり、意図しない位置に出てしまいます。

fixedはスクロールしても常に画面の同じ位置に固定されます。

.fixed-box {
  position: fixed;
  top: 0;
  right: 0;
}

たとえば「ページトップへ戻る」ボタンによく使われます。

stickyはrelativeとfixedの中間のような動きをします。

.sticky-box {
  position: sticky;
  top: 0;
}

ある程度までは普通にスクロールされ、設定した位置（ここではtop: 0）まで来たら、画面に固定されます。

📝 使用時の注意点：親要素にoverflow: hiddenなどがあると動作しません。

positionを使うときに関係してくるのがz-indexです。これは「前後関係（重なり順）」を決めるプロパティです。

.box1 {
  position: relative;
  z-index: 1;
}
.box2 {
  position: relative;
  z-index: 10;
}

数値が大きいほど上に表示されます。positionが指定されていないとz-indexは効きません。

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.card {
  position: relative;
}
.card-icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

.sidebar {
  position: sticky;
  top: 20px;
}

CSSのpositionをしっかり理解して、思い通りのデザインを実現していきましょう！