CSS の `position` プロパティは、ウェブページのレイアウトを設計する上で非常に重要な役割を果たします。この記事では、`static`、`relative`、`absolute`、`fixed`、および `sticky` という五つの異なる位置指定方法について詳しく説明し、それぞれの使用場面と原理を理解します。
一、position プロパティの概要
1. position プロパティとは？
`position` プロパティは、要素が文書フロー内でどのように配置されるかを決定します。このプロパティには以下のような五つの値があります：
- `static`：デフォルト値で、通常の文書フローに従います。
- `relative`：元の位置からの相対的な移動を行います。
- `absolute`：文書フローから外れ、最近の位置指定された祖先要素に対して配置されます。
- `fixed`：文書フローから外れ、ブラウザウィンドウに対して固定されます。
- `sticky`：スクロール中に特定のポイントで固定される特性を持ちます。
二、static: デフォルトの配置
1. 基本定義
position: static;
2. 特徴
- 文書フロー内に存在し、標準の HTML レイアウトルールに従います。
- `top`、`right`、`bottom`、`left` プロパティを無視します。
- `z-index` を使用して階層を調整できません。
三、relative: 相対配置
1. 基本定義
position: relative;
top: 15px;
left: 25px;
2. 特徴
- 文書フロー内に存在し、元のスペースを占有し続けます。
- 他の要素の位置には影響を与えません。
- 絶対配置の子要素の「基準点」となることができます。
四、absolute: 絶対配置
1. 基本定義
position: absolute;
top: 5px;
left: 5px;
2. 特徴
- 文書フローから外れ、スペースを占有しません。
- 最近の位置指定された祖先要素（`static` 以外）を基準に配置されます。
- 基準となる祖先要素がない場合、`html` 要素を基準とします。
- `z-index` をサポートします。
五、fixed: 固定配置
1. 基本定義
position: fixed;
top: 0;
right: 0;
2. 特徴
- 文書フローから外れ、スペースを占有しません。
- ブラウザのビューポートを基準に配置され、スクロールしても固定されます。
- モバイル端末での互換性に注意が必要です。
六、sticky: スティッキーポジション
1. 基本定義
position: sticky;
top: 10px;
2. 特徴
- スクロール中に指定したオフセットを超えると固定されます。
- 親コンテナに `overflow: hidden` があると動作しません。
七、五種類のポジション方式の比較
| 配置方法 | 文書フローから離れるか | 参照対象 | スペースを占めるか | 重ね順 (z-index) 使用可否 |
|---|---|---|---|---|
| static | いいえ | なし（通常の文書フロー） | はい | いいえ |
| relative | いいえ | 自身の元の位置 | はい | はい |
| absolute | はい | 最近の非 static の祖先要素 | いいえ | はい |
| fixed | はい | ブラウザのビューポート | いいえ | はい |
| sticky | 部分的にいいえ | 最近のスクロール可能な祖先 + オフセット | はい | はい |
八、実際の開発における応用
1. 包含ブロックの理解
`absolute` や `sticky` を使用する際、包含ブロックの概念を理解することが重要です。
2. 複数のポジション方式を組み合わせる
<div class="container" style="position: relative;">
<button class="close" style="position: absolute; top: 15px; right: 15px;">×</button>
</div>