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

Fixed positioning

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

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.position.fixed
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 44 より前では、ほとんどの場合、「position:fixed」ではスタッキング コンテキストが作成されませんでした。 Firefox とその仕様は、Chrome と Safari の長年の動作を模倣するように変更されています。

基本構文

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

ライブデモ

Lockheader style

CSS Lockheader style demo.

プレビュー全画面表示

Fabbutton style

CSS FABbutton style demo.

プレビュー全画面表示

toastnotification style

CSS toastnotification style demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク