【CSS】positionプロパティの使い方を基本から解説｜Webの基礎

記事内には広告が含まれます

2026年7月23日

はじめに

「スクロールしてもヘッダーを画面上部に固定したい」「バッジやアイコンを要素の右上にピタッと重ねたい」という経験はありませんか？

これらの多くは、position（ポジション）プロパティを使うことで簡単に解決できます。

前回の記事では、縦横二次元でレイアウトを組めるGridについて解説しました。
今回は、Gridやflexboxとは違う視点で要素の配置方法を制御するCSSの機能「position」について、仕組みからサンプルコードまでわかりやすく解説します。

positionとは？

positionは、要素の配置方法（位置決めの基準）を指定するCSSのプロパティです。

flexboxやGridが「複数の要素を並べる」ためのレイアウト機能であるのに対し、positionは特定の1要素を、通常の流れから外して自由な位置に配置するときに使います。ヘッダー固定・モーダルの中央表示・バッジの重ね配置など、部分的な位置調整が得意です。

positionが取れる値

値	説明
`static`（初期値）	通常の配置。座標指定は効かない
`relative`	通常の位置を基準に、そこからずらして配置
`absolute`	直近の「位置決め済みの祖先要素」を基準に配置
`fixed`	ブラウザの表示領域（ビューポート）を基準に固定配置
`sticky`	通常は`relative`、スクロールすると`fixed`のように振る舞う

positionを static 以外の値にすると、top / right / bottom / left プロパティで具体的な位置を指定できるようになります。これらのプロパティは、後ほど詳しく解説します。

static（初期値）

static は、すべての要素に最初から指定されている初期値です。

書式

.box {
    position: static;
}

static の状態では、HTMLに書いた順番通りに要素が配置され、top などの座標プロパティは一切効きません。特別な配置をしたい場合以外は、意識する必要はありません。

relative（相対配置）

relative は、要素本来の位置を基準に、そこからずらして配置する値です。

書式

.box {
    position: relative;
    top: 値;
    left: 値;
}

サンプル

/* 本来の位置から下に10px、右に20pxずらす */
.box {
    position: relative;
    top: 10px;
    left: 20px;
}

relative の特徴は、ずらしても元の位置のスペースが確保されたまま残ることです。見た目だけが移動し、周囲の要素のレイアウトには影響しません。

position: relative; は単体で使うだけでなく、次に紹介する absolute の**配置基準を作る**役割でもよく使われます。この使い方は実務で非常に頻出です。

absolute（絶対配置）

absolute は、直近にある「positionがstatic以外の祖先要素」を基準に配置する値です。基準となる祖先要素が見つからない場合は、ページ全体（<html>）が基準になります。

書式

.parent {
    position: relative; /* 配置の基準にする */
}

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

サンプル（バッジをカードの右上に重ねる）

<div class="card">
    <span class="badge">NEW</span>
    <h2 class="card-title">記事タイトル</h2>
    <p class="card-text">記事の概要テキストが入ります。</p>
</div>

.card {
    position: relative; /* バッジの配置基準になる */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #ff5555;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.card に position: relative; を指定しているため、.badge は .card の左上を基準に配置されます。この「親に relative、子に absolute」の組み合わせは、バッジ・アイコン・ツールチップなどの重ね配置で定番のパターンです。

absolute を指定した要素は、通常の流れから**完全に外れます**。周囲の要素はその要素が存在しないかのように詰めて配置されるため、レイアウト崩れの原因になりやすい点に注意してください。

fixed（固定配置）

fixed は、ブラウザの表示領域（ビューポート）を基準に固定配置する値です。ページをスクロールしても、常に同じ位置に表示され続けます。

書式

.box {
    position: fixed;
    top: 値;
    right: 値;
}

サンプル（ページ右下に固定表示するボタン）

/* ページトップへ戻るボタンを右下に固定 */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0077cc;
    color: #fff;
}

fixed は、ヘッダーの固定表示・チャットボタン・ページトップへ戻るボタンなど、スクロールしても常に見えていてほしいUIによく使われます。

sticky（スティッキー配置）

sticky は、通常はrelativeと同じ位置に表示され、スクロールして特定の位置に達するとfixedのように固定される値です。

書式

.box {
    position: sticky;
    top: 値; /* この位置に達すると固定される */
}

サンプル（見出しをスクロール時に上部固定）

.section-heading {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

見出しが画面上部（top: 0）に達するまでは通常通りスクロールで流れ、達した時点でその位置に固定されます。目次の見出しや、テーブルのヘッダー行を固定する用途でよく使われます。

sticky は親要素の範囲内でのみ機能します。親要素の表示が終わる（スクロールで見切れる）と、追従も一緒に終了します。

top / right / bottom / left（座標の指定）

top / right / bottom / left は、position が static 以外のときに使える座標プロパティです。

書式

.box {
    position: absolute; /* または relative / fixed / sticky */
    top: 値;
    right: 値;
    bottom: 値;
    left: 値;
}

基準となる方向

プロパティ	説明
`top`	基準の上端からの距離
`right`	基準の右端からの距離
`bottom`	基準の下端からの距離
`left`	基準の左端からの距離

サンプル（画面いっぱいに広げるオーバーレイ）

/* 4方向すべてを0にすると、基準要素いっぱいに広がる */
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

top: 0; right: 0; bottom: 0; left: 0; を同時に指定すると、基準となる要素いっぱいに広がります。モーダルの背景（オーバーレイ）でよく使われるテクニックです。

z-index（重なり順の制御）

z-index は、要素同士が重なったときの前後関係（重なり順）を指定するプロパティです。数値が大きいほど手前に表示されます。

書式

.box {
    position: relative; /* static以外を指定しないとz-indexは効かない */
    z-index: 数値;
}

サンプル

/* モーダルを他の要素より手前に表示 */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

/* 背景のオーバーレイはモーダルより奥に */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
}

注意：z-index は position が static のままだと効きません。重なり順を制御したい要素には、必ず relative・absolute・fixed・sticky のいずれかを指定してください。

サンプル（ヘッダー固定＋モーダル表示のレイアウト）

positionのプロパティを組み合わせた、実用的なサンプルです。

HTML

<header class="header">サイトヘッダー</header>

<div class="card">
    <span class="badge">NEW</span>
    <h2 class="card-title">記事タイトル</h2>
</div>

<div class="overlay">
    <div class="modal">
        <p>モーダルの中身です。</p>
    </div>
</div>

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* スクロールしても上部に固定されるヘッダー */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: #0077cc;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 10;
}

/* バッジをカードの右上に重ねる */
.card {
    position: relative;
    margin-top: 80px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #ff5555;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
}

/* 画面全体を覆う半透明の背景 */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/* 画面中央に表示するモーダル本体 */
.modal {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
}

このコードでは、fixed でヘッダーを固定し、relative + absolute でバッジを重ね、fixed + flex の組み合わせでモーダルを画面中央に表示しています。z-index によって、ヘッダーよりオーバーレイ・モーダルが手前に表示されるよう順序も制御しています。

よくある質問・トラブル対処

Q. absoluteを指定したのに、意図した位置に配置されない

→ absolute は「直近の position が static 以外の祖先要素」を基準にします。親要素に position: relative; を指定し忘れていないか確認してください。見つからない場合は <html> が基準になり、想定と大きくずれた位置に表示されます。

Q. z-indexを指定しても重なり順が変わらない

→ z-index は position が static（初期値）のままだと効きません。重なり順を制御したい要素には relative などを指定してください。

Q. fixedで固定した要素が、他の要素と重なってしまう

→ fixed の要素は通常の流れから外れるため、下にある要素と重なって表示されることがあります。固定した要素の高さ分だけ、他の要素に margin-top や padding-top を指定して余白を確保しましょう。

Q. stickyが効かない

→ sticky は top などの座標指定が必須です。また、親要素や祖先要素に overflow: hidden; などが指定されていると効かなくなることがあるので、あわせて確認してください。

おわりに（まとめ）

まとめ

positionを使いこなせると、ヘッダー固定・バッジの重ね配置・モーダル表示といった、Grid・flexboxだけでは難しい細かな配置調整が自在にできるようになります。

✅ static（初期値）は通常の配置で、座標指定は効かない
✅ relative は元の位置を基準にずらす。スペースはそのまま残る
✅ absolute は直近の relative 等の祖先要素を基準に配置される
✅ fixed はビューポート基準で常に同じ位置に固定表示される
✅ sticky は通常時relative、スクロールでfixedのように振る舞う
✅ z-index で重なり順を制御できる（static以外の要素にのみ有効）

まず relative・absolute・fixed・z-index の4つを押さえましょう。
「親にrelative、子にabsolute」の組み合わせを覚えるだけで、バッジ配置やモーダル表示の大半に対応できます。つを理解するだけで、カード一覧やページレイアウトの大半をGridで組めるようになります。

次回は「CSSの疑似クラス・疑似要素（:hover、::before など）」について勉強・解説します。

この記事が、少しでも誰かのお役に立てれば幸いです。