position（配置方法）プロパティ

最終更新：2026-09-13

position position（配置方法）プロパティ

position プロパティは要素がどう配置されるかを指定します。ドキュメントフローに残るか、ある基準点に対してオフセットされるかを決めます。top、right、bottom、left と組み合わせることで、相対配置、絶対配置、固定配置、粘着配置といった一般的なレイアウト効果を実現できます。

カテゴリ
初期値	static
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS2
状態	標準

📝 構文

position: static | relative | absolute | fixed | sticky;

⚙️ 値

値	タイプ	説明
`static \| relative \| absolute \| fixed \| sticky`	キーワード	配置の種類: static/relative/absolute/fixed/sticky。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
position	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： absolute 要素は最も近い static でない祖先を基準に配置されるため、通常は親に position:relative を指定して配置の基準にします。

注意： fixed 要素はビューポートを基準に配置されます。モバイルブラウザーではサポートに差があり、場合によってはがたつきや位置ずれを招くことがあります。

❓ よくある質問

Qabsolute と relative の違いは何ですか？

Arelative 要素はドキュメントフローに残るため、top や left などのオフセットで元の位置から移動しますが、元のスペースは維持されます。absolute 要素はフローから外れ、スペースを占めず、最も近い非 static の配置済み祖先を基準に配置されます。該当する祖先がなければビューポートを基準にします。覚え方: relative は要素を動かしつつ場所を維持、absolute はフローを離れ祖先に固定。

Qsticky と fixed の違いは何ですか？

Afixed は常にビューポートを基準に配置され、スクロール中もそのまま留まり、フロー外です。sticky は relative と fixed を組み合わせます。スクロールのしきい値を越える前は relative のようにコンテンツとともにスクロールし、越えた後は fixed のように留まりますが、親の範囲内だけです。sticky には top などのしきい値が必要で、親に overflow:hidden があってはいけません。

Qposition:absolute は何を基準に配置されますか？

Aabsolute 要素は最も近い配置済み祖先（position が static でない要素）の padding box を基準に配置されます。すべての祖先が static なら、通常はビューポートである初期包含ブロックに代替されます。そのため一般的な書き方は、親に position:relative を指定して配置の文脈とし、子の absolute オフセットを親コンテナに対して計算させることです。

Qposition:sticky が効かないのはなぜですか？

Aよくある原因: 1) 親コンテナの高さが不十分でスクロール余地がない。2) 親や祖先に overflow:hidden/auto/scroll が設定されており sticky が無効になる。3) top や bottom などのしきい値が未設定。4) 要素がスクロールできないコンテナ内にある。これらを一つずつ確認し、特に祖先の overflow に注意してください。