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

Fixed positioning

要素をビューポートに対して固定配置する位置指定方式です。スクロールしても要素の位置が変わらないため、常に表示させたいナビゲーションバーやフローティングボタンに最適です。top、right、bottom、leftプロパティで位置を指定し、z-indexで重なり順を制御します。

固定配置ビューポート基準

概要

要素をビューポートに対して固定配置する位置指定方式です。スクロールしても要素の位置が変わらないため、常に表示させたいナビゲーションバーやフローティングボタンに最適です。top、right、bottom、leftプロパティで位置を指定し、z-indexで重なり順を制御します。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

実務での使いどころ

  • 固定ヘッダー・ナビゲーション

    ページのヘッダーをビューポート上部に固定し、スクロールしても常にナビゲーションにアクセスできるようにします。

注意点

  • transform、filter、willChangeプロパティを持つ祖先要素がある場合、ビューポートではなくその祖先が基準になるため注意してください。

アクセシビリティ

  • 固定要素がページコンテンツを覆い隠さないよう十分な余白を確保し、キーボードフォーカスが固定要素の背後に隠れないようにしてください。

参考リンク