← カテゴリ一覧に戻る

位置指定（position）

positiontop / right / bottom / leftstaticrelativeabsolutefixedsticky

positionプロパティは要素の配置方法を制御します。static（通常フロー）からfixed（ビューポート固定）まで、5つの値があります。top/right/bottom/leftで最終的な位置を微調整します。

デモ：position の各値

position: static（デフォルト — 通常フロー通り）

static要素（top/left は無効）

position: relative（元の位置からずらす、スペースは残る）

前の要素relative（top:10, left:20）後の要素（スペース保持）

position: absolute（最近傍のpositioned祖先を基準に絶対配置）

position: relative の親コンテナ
top:8 right:8
bottom:8 left:50%

position: fixed（ビューポートに固定 — ↘ 右下の青いボタンがその例）

fixedはページをスクロールしても同じ位置に留まります。ナビゲーションバー、チャットボタン、「ページトップへ」ボタンなどに使用。
↑

position: sticky（スクロール時に指定位置で固定される）

sticky ヘッダー（top: 0）
コンテンツ行 1 — スクロールしてみてください
コンテンツ行 2 — スクロールしてみてください
コンテンツ行 3 — スクロールしてみてください
コンテンツ行 4 — スクロールしてみてください
コンテンツ行 5 — スクロールしてみてください
コンテンツ行 6 — スクロールしてみてください
コンテンツ行 7 — スクロールしてみてください
コンテンツ行 8 — スクロールしてみてください

inset ショートハンド

inset: 16px（全方向16pxの余白）

inset: 16px = top: 16px; right: 16px; bottom: 16px; left: 16px

比較：absolute vs fixed vs sticky

観点absolutefixedsticky
配置の基準最近傍のpositioned祖先ビューポートスクロールコンテナ
スクロール時ページと一緒に動く常に同じ位置に固定閾値まで通常、以降固定
フローフローから外れるフローから外れるフローに残る
使いどころバッジ、ドロップダウンナビバー、フローティングボタンテーブルヘッダー、サイドバー

NEWCSS Anchor Positioning（2024年〜 Chrome 125+）

特定の要素（アンカー）を基準にポップオーバーやツールチップを配置できる新機能です。JavaScriptなしでドロップダウン・ツールチップの位置制御が可能になります。

/* アンカーの定義 */
.button {
  anchor-name: --my-button;
}

/* アンカーに相対的に配置 */
.tooltip {
  position: absolute;
  position-anchor: --my-button;
  top: anchor(bottom);   /* アンカーの下辺に揃える */
  left: anchor(center);  /* アンカーの中央に揃える */
  translate: -50% 0;

  /* 画面外に出る場合の代替位置 */
  position-try-fallbacks: flip-block;
}

また inset ショートハンド（Chrome 87+、Firefox 87+）は top/right/bottom/left の一括指定として広くサポートされています。

コード例

/* position の基本 */
.parent { position: relative; }  /* absoluteの基準を作る */

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  /* または inset ショートハンド */
}

/* 全画面オーバーレイ */
.overlay {
  position: fixed;
  inset: 0;  /* top: 0; right: 0; bottom: 0; left: 0 と同じ */
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

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

/* sticky ヘッダー */
.table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}

🤖 AIプロンプトテンプレート

CSSのpositionプロパティを使った配置デモをReact + Tailwind CSSで作成してください。

要件:
- static / relative / absolute / fixed / sticky の5つの値の違いを視覚的に比較するデモ
- absoluteポジションを使ったバッジ・通知数の表示実装（カード右上の数字バッジなど）
- fixedを使ったナビゲーションバーとフローティングアクションボタン（FAB）の実装
- position: stickyを使ったテーブルのスティッキーヘッダーの実装
- insetショートハンドを使った全画面オーバーレイ・モーダル背景の実装
- transform: translate(-50%, -50%)を使ったabsolute中央配置のパターン

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo