Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Position

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 top, right, bottom, left の各物理的プロパティ、 inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end のフロー相対論理的プロパティが、配置された要素の最終的な位置を決めます。

配置レイアウト基礎

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
position
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.header {
  position: sticky;
  top: 0;
}
.modal {
  position: fixed;
  inset: 0;
}

ライブデモ

position: relative

CSS Position: relative demo.

プレビュー全画面表示

position: absolute

CSS Position: absolute demo.

プレビュー全画面表示

position: sticky

CSS Position: sticky demo.

プレビュー全画面表示

実務での使いどころ

  • 固定ヘッダーの実装

    position: stickyやfixedを使用して、スクロール時もヘッダーやナビゲーションを画面上部に固定表示します。

注意点

  • position: absoluteやfixedは要素をドキュメントフローから外すため、周囲のレイアウトに影響を与えます。

アクセシビリティ

  • position: fixedで固定された要素がコンテンツを覆い隠さないよう、十分なスクロール余白を確保してください。

参考リンク