CSS positionの使い方｜absolute・relative・stickyの違いを徹底解説
プログラミング
公開日: 2026/01/26
目次
※この記事にはプロモーションを含みます
はじめに
CSS のposition プロパティは、Web ページの要素配置をコントロールする重要な CSS プロパティです。
しかし、relativeやabsolute、fixed、stickyなど種類が多く、初心者は混乱しやすい箇所でもあります。
本記事では、それぞれの違いや使いどころをコード例を交えて丁寧に解説します。レイアウト崩れの原因も紹介しているので、実装時にも役立てていきましょう。
position とは？
position プロパティの基本構造
position プロパティは要素の配置基準と動作を決定します。
主な値は static（初期値）、relative、absolute、fixed、sticky です。
これらは要素の表示フローや基準点（親要素やビューポート）に対する動作を変え、top・right・bottom・left と組み合わせて位置を指定します。
基本的な指定例
.example {
position: relative;
top: 10px;
left: 20px;
}上記の例では、要素は自分の通常位置を基準にオフセット（配置）されます。
重要な概念
- 配置基準：指定する値の種類によって、基準となる要素が異なる。（親要素や画面など）
- 重なり順： position と z-index の組み合わせで表示の前後関係を制御する。
指定する値の種類
position プロパティを使う際には、指定方法によって要素の基準や挙動が大きく変わります。
特に以下のポイントを理解しておくことで、意図しないレイアウト崩れを防ぐことができます。
| プロパティ | 基準位置 | 特徴 | よく使う用途 |
|---|---|---|---|
| absolute | 最も近い position 指定（relative 等） された祖先要素 | 通常の配置の流れから外れ、自由に配置できる | ポップアップ、吹き出し、配置調整 |
| fixed | ビューポート（画面） | スクロールしても位置が変わらず常に固定される | 固定ヘッダー、固定ボタン、ページトップボタン |
| sticky | スクロール位置に応じて本来の位置から固定の位置に切り替わる | 要素が一定位置に達すると固定される | スクロールに追従する見出し、メニュー |
position の種類と特徴
static（初期値）
static は要素の標準的な配置の流れに従う状態です。
通常は特別な設定をしない限りこの状態で、top/left などの指定が無効になります。
基準理解の起点として押さえておくとよいでしょう。
relative と absolute の違い
position の中でも relative と absolute は、Web レイアウトで頻繁に使われる指定です。
それぞれの特徴を理解して使い分けることで、要素の意図した位置調整がしやすくなります。
- relative：元の位置を基準に移動する。他の要素との関係は保つ。
- absolute：通常の配置の流れから抜け出し、親要素の位置を基準に配置する。
実務ポイント
子要素に absolute を指定する場合は、親要素に relative を付与して基準を明確にするのが基本です。
また、レイアウト固定には便利な一方で、レスポンシブデザインでは他の要素との整合が崩れることがあります。
そのため、近年では flex や grid といったレイアウト手法を併用するケースが増えています。
fixed と sticky の使いどころ
次に、画面に追従するタイプの指定である fixed と sticky の違いを見ていきましょう。
どちらもユーザーのスクロールに応じて位置を制御できますが、動作のタイミングが異なります。
- fixed：スクロールしても位置が変わらない。ナビゲーションや、ページ全体で目立たせたいボタンに最適。
- sticky：特定位置で固定と解除を自動切替。ページガイドや目次などに便利。
たとえば、以下のようなコードでは、目次がスクロールに合わせて上部に固定されます。
<div class="toc">
<ul>
<li>目次1</li>
<li>目次2</li>
</ul>
</div>.toc {
position: sticky;
top: 20px;
}sticky はユーザーの視線誘導に活用しやすく、長文ページや記事型サイトで特に有効です。
このブログ記事内では画面上部のメニューを含むヘッダーが sticky になっています。
固定要素を多用すると視認性を損なう場合もあるため、ユーザー体験を考慮して適切な箇所に使用しましょう。
崩れる時の原因と対処方法
親要素との関係
position の指定は親要素との関係で崩れやすいため、以下の項目を併せて確認しましょう。
親要素の position
absolute は親要素に position: relative; が指定されていることを確認しましょう。指定されていないと、思わぬ位置に配置されることがあります。
親要素の overflow
親要素に overflow: hidden や overflow: auto が設定されている場合、子要素のはみ出し部分が隠れたりスクロールで切れてしまうことがあります。
対応方法
- はみ出しを見せたい場合は、親要素の overflow を visible に変更
- 必要に応じて、別のラッパー要素を作り、そちらに overflow を調整する
親要素の幅
子要素の配置が意図通りにならない場合、親要素の幅が原因となることがあります。
特に absolute や sticky を使用する場合、親要素の幅が狭すぎると子要素がはみ出したり、意図した位置に収まらないことがあります。
z-index
z-index は、画面上で「どの要素を前に出すか（重なり順）」を決める設定です。
ただし、要素のグループ（スタッキングコンテキスト）の仕組みを理解していないと、思った通りに重なってくれないことがあります。
対処方法
- 重ねたい要素に適切な z-index を指定する
- z-index の値は極端に大きくせず、階層構造を整理して管理する
position の実践例
ナビゲーション固定の実装例
ナビゲーションを常に画面上部に表示させたい場合、position: fixed; を使ってヘッダーを固定する方法がよく使われます。
この指定をすると、要素は 画面（ビューポート）を基準に固定され、スクロールしても常に同じ位置に表示されます。
たとえば、次のようなコードで実装できます。
<body>
<header>これはヘッダーです。スクロール時も画面上部に固定されます。</header>
</body>body {
padding-top: 60px;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 1000;
}注意点
- コンテンツがヘッダーに隠れないよう padding-top を調整
- モバイルでは高さ調整が必須
スクロール連動アニメーションの作り方
スクロールに合わせて要素を動かしたい場合は、position: sticky; を使うと簡単に実装できます。
たとえば、見出しをスクロール中も画面上部に固定するには、次のように指定します。
<body>
<header class="section-header">
これはヘッダーです。スクロール時も画面上部に固定されます。
</header>
</body>.section-header {
position: sticky;
top: 0;
background: #fff;
}注意点
- 親要素に overflow: hidden; があると無効になるため、レイアウト全体の構造確認が重要
まとめ
CSS の position プロパティを正しく理解すれば、Web サイトのレイアウト自由度は格段に高まります。
absolute・relative・fixed・sticky を適切に使い分けることで、より思い通りの配置が可能になります。
特に、親子関係の基準や z-index の仕組みを理解しておくと、複雑なレイアウトでも安定した表示を実現できます。
HTML 構造との関係を意識しながら、少しずつ実践を重ねていきましょう。
実務で使える CSS スキルをさらに伸ばしたい方は、WEBMASTERS の学習カリキュラムがおすすめです。
実務を意識したカリキュラム構成で、position だけでなく flex や grid、レスポンシブ対応まで基礎から学ぶ事ができるため、コーディングの理解が確実に深まります。
