EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSポジショニング

CSSのポジショニングは強力なレイアウトツールで、ページ上の要素の配置を細かく制御できます。

positionプロパティ早見表

値 動作 基準点 よく使うケース
static 通常フロー（デフォルト） — デフォルトの動作
relative 通常位置からのオフセット 自身の元の位置 微調整、配置コンテキスト
absolute フローから除外 最近の配置された祖先 バッジ、オーバーレイ
fixed ビューポートに固定 ビューポート 固定ヘッダー、トップに戻る
sticky ハイブリッド スクロールコンテナ + ビューポート 固定ヘッダー

position: relative

通常位置からのオフセットで、ドキュメントフローから除外されません：

サンプル

HTML 
<style>
.box {
  position: relative;
  top: 20px;    /* 20px下に移動 */
  left: 30px;   /* 30px右に移動 */
  background: #e3f2fd;
  padding: 10px;
}
</style>
<div class="box">相対配置（元の位置からのオフセット）</div>
<p>この段落は通常フローのままです——ボックスはまだ元のスペースを占有しています。</p>
▶ 試してみよう

よく使うケース：

position: absolute

フローから除外され、最近の配置された祖先に対して相対的に配置：

サンプル

HTML 
<style>
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px solid #333;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e74c3c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>
<div class="parent">
  <div class="badge">HOT</div>
  <p>商品カードコンテンツ</p>
</div>
▶ 試してみよう

重要： 配置された祖先が存在しない場合、absoluteはビューポートに対して相対的に配置されます。

position: fixed

ビューポートに固定され、ページと一緒にスクロールしません：

サンプル

HTML 
<style>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #2c3e50;
  color: white;
  padding: 10px 20px;
  z-index: 1000;
}
</style>
<div class="fixed-header">固定ヘッダー——常に上部に表示</div>
▶ 試してみよう

よく使うケース：

position: sticky

relativeとfixedのハイブリッド——通常はスクロールし、しきい値で「固定」されます：

サンプル

HTML 
<style>
.sticky-nav {
  position: sticky;
  top: 0;
  background: #2c3e50;
  color: white;
  padding: 10px;
  z-index: 100;
}
</style>
<div class="sticky-nav">スティッキーナビ——コンテンツと一緒にスクロールし、上部で固定</div>
▶ 試してみよう

使用上の注意：

z-index（重なり順）

要素が重なる場合、z-indexがどちらが上に表示されるかを制御：

サンプル

HTML 
<style>
.box1 {
  position: absolute;
  z-index: 10;
  background: #e74c3c;
  width: 100px;
  height: 100px;
}
.box2 {
  position: absolute;
  z-index: 5;
  background: #3498db;
  width: 100px;
  height: 100px;
  left: 30px;
  top: 30px;
}
</style>
<div class="box1">z-index: 10（前面）</div>
<div class="box2">z-index: 5（背面）</div>
▶ 試してみよう

注意： z-indexは配置された要素（static以外）でのみ機能します。

スタッキングコンテキスト

z-indexは同じ「スタッキングコンテキスト」内で比較されます。各配置された要素はスタッキングコンテキストを作成し、子のz-indexは親のコンテキスト内でのみ比較されます。

❓ よくある質問

Q position: relativeはいつ使いますか？
A 最も一般的には、absoluteの子要素の配置基準として使用されます。親に`position: relative`を追加すると（オフセットなし）、`position: absolute`の子要素はその親に対して相対的に配置されます。親にrelativeがない場合、absoluteはページ全体に対して相対的に配置されます。
Q fixedポジショニングはモバイルでうまく機能しませんか？
A fixedはモバイルSafariで一貫性のない動作をします。特にキーボードのポップアップやページスクロール時に顕著です。一部のシナリオでは`position: sticky`を代替として使用するか、JavaScriptでモバイルを検出して特別に処理します。
Q z-indexを高く設定してもまだブロックされますか？
A z-indexは同じスタッキングコンテキスト内でのみ機能します。親にz-indexがある場合、子のz-indexはその親のコンテキスト内でのみ比較されます——親の境界を越えることはありません。親のz-indexが低いか、`opacity`など新しいスタッキングコンテキストを作成するプロパティがないか確認してください。

📖 まとめ

📝 演習

  1. position: absoluteを使用して、右上隅に「HOT」バッジを持つ「商品カード」を作成してください。
  2. position: fixedを使用して、固定の下部ナビゲーションバーまたは著作権表示を作成してください。
  3. 「スティッキー見出し」を作成してください——スクロール時に次のタイトルが押し出すまで上部に固定されるセクションタイトル。
  4. 子要素の絶対中央揃えを実装してください（absolute + top/left + transformを使用）。
100%