CSSのPositionプロパティを理解する｜実コード付きで解説

（最終更新日：2023年6月）

✔このような方へ向けて書かれた記事となります

「CSSのpositionプロパティの機能が知りたい」
「positionプロパティの使い方を詳しく学びたい」
「実際のCSS positionプロパティの例が見てみたい」

✔当記事を通じてお伝えすること

CSS positionプロパティの基本
positionプロパティの応用的な使い方
実際のCSS positionプロパティの実例

当記事では、CSS positionプロパティの基本から応用的な使い方まで、実際のコードを交えながら詳しく解説していきます。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

CSS Positionとは？

こちらでは、CSSのPositionについて解説していきます。

Positionは、Webページの要素を特定の位置に配置するための重要な概念です。

Positionの基本概念
Positionの使い方と活用法

Positionの基本概念

CSSのpositionプロパティは、HTML要素の配置位置を指定するためのものです。

これは画面上のどこに要素を表示するか、また他要素とどのように重ねるかを制御するための重要なツールです。

positionプロパティは5つの値をとります

static
relative
absolute
fixed
sticky

それぞれ異なる挙動をしますので、それぞれの特性を理解することが大切です。

Positionの使い方と活用法

positionプロパティは、Webページのデザインやレイアウトにおいてとても役立ちます。

具体的には、以下のようなことが可能です。

要素の位置を固定
他の要素と重ねる
画面のスクロールに応じて要素の位置を動かす

しかし、positionを用いるときは注意も必要。

適切に使用しないと、デザインが崩れる原因となってしまいます。

また、アクセシビリティやパフォーマンスにも影響を及ぼす可能性にあるでしょう。

positionの使用法をしっかり理解し、適切な使い方を身につけることが重要です。

Positionの基本文法

Positionの具体的な書き方と、その主要な値について解説していきます。

Positionの書き方
主要な値の説明

Positionの書き方

positionプロパティの基本的な書き方は以下の通りです。

selector {
  position: value;
}

ここでのselectorは位置を指定したいHTML要素を選択するためのもの。

valueはpositionプロパティが取りうる値です。

主要な値の説明

positionプロパティは5つの値をとります。

以下は、CSSにおけるpositionプロパティの値とその説明、および例を示した一覧表です。

値	説明	例
static	要素は通常の文書フローに従って配置されます。	position: static;
relative	要素は通常の文書フローに従って配置されますが、自身に対して相対的に位置をオフセットできます。	position: relative;
absolute	要素は最も近い非staticの祖先要素（または初期包含ブロック）に対して絶対位置を指定します。	position: absolute;
fixed	要素はビューポート（ブラウザーの表示領域）に対して固定位置を指定します。	position: fixed;
sticky	要素はスクロール位置に応じて相対的または固定的な位置を取ります。	position: sticky;

これらの値を使用することで、要素の配置方法やスクロールに対する挙動を制御できます。

適切な値を選択して、要素の位置と挙動を調整してください。

Positionの種類: static, relative, absolute, fixed, sticky

こちらでは、positionプロパティの各値がどのような挙動を示すのか、具体的に解説していきます。

staticの特徴
relativeの特徴
absoluteの特徴
fixedの特徴
stickyの特徴

staticの特徴

position: static;は、要素に位置を指定しないことを意味します。

これはpositionプロパティのデフォルト値で、要素は文書の通常の流れに従って配置されます。

この場合、top、right、`bottom、leftのプロパティは一切影響しません。

また、z-indexも適用できません。

具体的な例を見てみましょう。

<div style="position: static;">
  これは静的な要素です。
</div>

このdivはページ上で通常通り配置され、周囲の要素と通常通りのインタラクションを持ちます。

relativeの特徴

position: relative;は、要素をその”通常位置”からオフセットする際に使用されます。

オフセットとは、要素をその通常位置から特定の距離だけ移動させること。

top、right、bottom、leftプロパティを使用して指定可能です。

<div style="position: relative; left: 20px;">
  これは左から20ピクセル移動した要素です。
</div>

この例では、div要素はその通常位置の左側から20ピクセル移動しています。

その”元のスペース”は基準として保持され、他要素はその存在を認識します。

absoluteの特徴

position: absolute;は、要素をその通常のフローから完全に取り除き、ページレイアウトの影響を受けずに配置する場合に使用されます。

その位置は、最も近い親要素（またはそれがなければ最初の包含ブロック）に対して相対的になります。

この位置はtop、right、bottom、leftプロパティで指定します。

<div style="position: absolute; top: 0; right: 0;">
  これはページの右上に配置された要素です。
</div>

topやrightは、本来の位置からの距離を示すもの。

0のときは通常位置と同じであることを意味します。

fixedの特徴

position: fixed;は、要素をビューポート（ブラウザウィンドウ）に対して固定位置に配置する場合に使用します。

スクロールしてもその位置は変わりません。

top、right、bottom、leftプロパティで位置を指定します。

<div style="position: fixed; bottom: 0; right: 0;">
  これはビューポートの右下に固定された要素です。
</div>

div要素はビューポートの右下に固定され、ページをスクロールしてもその位置は変わりません。

stickyの特徴

position: sticky;は、要素が一定の範囲でスクロールに伴って位置が変動し、その範囲を超えると固定される特殊な状態を表します。

スクロールした場合、sticky要素は一定の位置に”粘着”するように動作します。

top、right、bottom、leftプロパティを用いて”粘着”する位置を指定してください。

<div style="position: sticky; top: 0;">
  これはビューポートの上部に"粘着"する要素です。
</div>

この例では、ユーザーがページを下にスクロールしてもdiv要素はビューポートの上部に留まります。

ただしその親要素の範囲を超えると、通常のスクロールと同様に、上へ移動します。

Positionと併用できるプロパティ: top, right, bottom, left, z-index

Positionプロパティと一緒に使われる他の重要なプロパティを紹介します。

これらのプロパティにより、要素の正確な位置を制御できます。

top, right, bottom, leftの使い方
z-indexの使い方

top, right, bottom, leftの使い方

これらのプロパティは、要素の正確な位置を制御するためにpositionプロパティとともに使用されます。

各プロパティは、それぞれの指定する基準位置からのオフセットを定義します。

top：要素の上端
right：要素の右端
bottom：要素の下端
left：要素の左端

これらのプロパティを使用する際は、要素のpositionプロパティがstatic以外の値に設定されていることを確認しましょう。

staticの場合、これらのプロパティは無視されてしまいます。

z-indexの使い方

z-indexプロパティは、要素の重なり順（z軸順）を制御します。

順番を決めるのに、覚えておくことは以下のとおりです。

z-indexの値が大きい要素ほど前面に表示される
値が小さい要素は背面に表示される

同じz-index値を持つ要素が重なる場合、HTMLソースで後に来る要素が前面に表示されます。

これらのプロパティを理解し、適切に使用することで、Webページのレイアウトを細かくコントロールすることが可能となります。

positionプロパティがstaticだと、z-indexによる指定は効果が出ません。

実践例: 各Positionの使い方

上記で解説した各position値の具体的な使用例をご覧ください。

staticの実践例
relativeの実践例
absoluteの実践例
fixedの実践例
stickyの実践例

staticの実践例

position: static;は、指定しなくても全ての要素にデフォルトで適用されます。

これにより、各要素はドキュメントフローに従って配置されます。

relativeの実践例

position: relative;は要素を少しだけ移動させたい時に使います。

例えば、以下のようにマウスホバー時に要素を移動させる効果を作ることが可能です。

<style>
.button {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.button:hover {
  top: -3px;
}
</style>

<button class="button">ホバーミー</button>

この例では、ボタンにマウスを置くと少し上に移動します。

absoluteの実践例

position: absolute;は、親要素に対して要素を絶対配置する際に使用します。

例えば、以下のように要素を親要素の右下に配置することが可能です。

<style>
.container {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.box {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>

<div class="container">
  <div class="box">右下に配置されました</div>
</div>

この例では、.box要素は親である.container要素の右下に配置されます。

fixedの実践例

position: fixed;は、特定の要素を常に表示したい場合に使用します。

例えば、以下のようにナビゲーションバーを常に画面上部に表示することが可能です。

<style>
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 10px;
}
</style>

<div class="navbar">ナビゲーションバー</div>

この例では、.navbar要素はページをスクロールしても常に画面上部に固定されて表示されます。

stickyの実践例

position: sticky;は特定の範囲で要素をスクロールに追随させたいときに使用。

例えば、以下のように要素をスクロール範囲内で上部に”粘着”させることが可能です。

<style>
.container {
  height: 300px;
  overflow: auto;
}

.sticky {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  padding: 10px;
}
</style>

<div class="container">
  <div class="sticky">スティッキー要素</div>
  <p>ここにたくさんのテキスト...</p>
</div>

この例では、.sticky要素は、親である.container要素のスクロール範囲内で上部に”粘着”します。