position

/* static: 通常フロー（初期値）。top/left等は無効 */
div.test { position: static;}

/* relative: 通常フローの位置を基準にずらす */
div.test2 { position: relative; top: 10px; left: 20px;}

/* absolute: 直近の position 指定済み祖先要素を基準に配置 */
.parent { position: relative;}
.child { position: absolute; top: 0; right: 0;}

/* fixed: ウィンドウを基準に固定（スクロールしても動かない） */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}

/* sticky: スクロール位置に応じて relative と fixed を切り替え */
.table-header { position: sticky; top: 0; background: #fff;}

/* absoluteで中央配置 */
.overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

以下の『position』プロパティを設定している要素は『opacity: 0.7』を指定して半透明にしています。

<div style="position: static; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: static』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。</p>

<div style="position: relative; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: relative』、『top: 0』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: relative』を指定された手前の要素は位置を移動させても通常のドキュメントフローで配置されるはずだったスペースは確保されます。なのでこのp要素は位置が詰まることなくそのままの位置で表示されます。</p>

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: absolute』、『top: 0』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: absolute』を指定された手前の要素の通常のドキュメントフローで配置されるはずだったスペースは確保されません。なのでこのp要素は位置が詰まって表示されます。</p>

『position: fixed』のサンプルはこちらをご覧ください。

/* 固定ヘッダー: スクロールしても上部に固定 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #2c3e50;
  color: #fff;
  padding: 12px 20px;
  z-index: 1000; /* 他の要素より手前に表示 */
}
/* ヘッダーの高さ分だけbodyに余白を確保 */
body { padding-top: 60px; }

/* モーダルオーバーレイ: 画面中央に配置 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
}

/* stickyサイドバー: スクロールに追従して固定 */
.sidebar {
  position: sticky;
  top: 80px; /* ヘッダーの高さ + 余白 */
  align-self: start; /* Flexbox/Grid内で上詰め */
}

/* 親要素を基準にしたバッジ配置 */
.card {
  position: relative; /* 子要素のabsoluteの基準になる */
}
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}

サンプルページはこちら

『z-index』プロパティは『position』が『static』以外の値に設定されている要素にのみ有効です。値が大きいほど手前に表示されます。

/* z-index は position が static 以外でのみ有効 */
.behind { position: relative; z-index: 1; }
.front { position: relative; z-index: 10; } /* こちらが手前 */

/* よくあるレイヤー構成 */
.content { position: relative; z-index: 1; }
.dropdown { position: absolute; z-index: 100; }
.modal { position: fixed;    z-index: 1000; }
.toast { position: fixed;    z-index: 2000; }

レイヤーの管理にはCSS変数を使うと、値の変更を1か所にまとめられます。

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;
}
.modal { position: fixed; z-index: var(--z-modal); }

サンプルページはこちら

よくあるミス1: 親のposition指定忘れ

親要素に position を指定し忘れると、子要素の absolute がウィンドウ基準になってしまいます。

.parent { /* position: relative; が必要！ */ }
.child { position: absolute; top: 0; right: 0; }
/* → 親を基準に配置されず、ページの右上に飛んでしまう */

よくあるミス2: overflowによるsticky無効化

親要素に overflow: hidden / auto / scroll が設定されていると sticky は動作しません。

.wrapper { overflow: hidden; }
.header { position: sticky; top: 0; }
/* → スクロールしても固定されない */

よくあるミス3: transformによるfixedの基準変更

transform が設定された祖先要素の中では、fixed はウィンドウ基準ではなくその要素基準になります。

.animated-wrapper { transform: translateX(0); }
.fixed-child { position: fixed; top: 0; }
/* → ウィンドウではなく .animated-wrapper 基準になる */

サンプルページはこちら

要素の配置方法を変更できます。

値に『static』と指定した場合は通常のドキュメントフローの配置となります。『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティは全て無効となります。これが初期値です。

値に『relative』と指定した場合は通常のドキュメントフローでの配置を基準とした位置で指定できます。この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は通常のドキュメントフローで配置されるはずだった場所からの移動量を指定するものとなります。『relative』と指定された要素が元々配置されるはずだったスペースは確保されますので続く要素は詰まることなくそのままの配置が維持されます。

<div style="position: relative; top: 100px; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: relative』、『top: 100px』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: relative』を指定された手前の要素は位置を移動させても通常のドキュメントフローで配置されるはずだったスペースは確保されます。なのでこのp要素は位置が詰まることなくそのままの位置で表示されます。</p>

値に『absolute』と指定した場合で、『position』プロパティに『static』以外の値が設定されている祖先要素が存在した場合はその直近の祖先要素を基準とした配置が行われます。全ての祖先要素の『position』プロパティが『static』だった場合はウィンドウを基準として配置されます。この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は基準となる包含ブロックの各辺からの距離を指定するものとなります。『absolute』と指定された要素が元々配置されるはずだったスペースは確保されませんので続く要素は詰まって配置されます。

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">ここは幅300px、高さ300pxのdiv要素です。『position: absolute』、『top: 0』、『left: 50px』を指定しています。</div>
<p style="background-color: #0f9">ここはp要素です。『position: absolute』を指定された手前の要素の通常のドキュメントフローで配置されるはずだったスペースは確保されません。なのでこのp要素は位置が詰まって表示されます。</p>

値に『fixed』と指定した場合はウィンドウの左上を基準位置とした配置が行われます。スクロールしてもその位置は固定となり、この値が指定されている場合の『top』プロパティ、『right』プロパティ、『bottom』プロパティ、『left』プロパティの値は基準となるウィンドウの各辺からの距離を指定するものとなります。『fixed』と指定された要素が元々配置されるはずだったスペースは確保されませんので続く要素は詰まって配置されます。

『position: fixed』のサンプルはこちらをご覧ください。

『position』プロパティに『absolute』もしくは『fixed』が指定された子要素が存在していた場合、親要素はその子要素を自身の高さに算出できません。これは『position』プロパティに『absolute』もしくは『fixed』が指定された要素は通常のドキュメントフローから完全に切り離されたものとしてレイアウトされるためで、CSSのみでこの子要素の高さを親要素に自動算出させることはできません。自動で算出させたい場合はJavaScriptを使用すると良いでしょう。

そして、『position』プロパティに『absolute』もしくは『fixed』を指定した要素は『margin』プロパティの相殺は起こりません。こちらもご注意ください。

※『position』プロパティはこちらでも詳しく解説を行っています。

※ バージョン情報は MDN に基づいています。