CSS position: fixed プロパティ値

CSS position プロパティ

position: fixedは、CSS 配置プロパティの中で固定配置に使用される値です。固定配置を使用する要素はドキュメントフローから外れ、ブラウザのビューポート（viewport）に対して配置され、ページのスクロールに合わせて移動することはありません。

これは、固定ナビゲーションバー、トップに戻るボタン、サイドバー広告などの機能を実装するための中心的な技術です。

単語の意味：fixedラテン語に由来しfixare、「固定する、取り付ける」という意味で、要素の位置が一度決まると変わらないことを表します。

基本構文

position: fixedと組み合わせて使用する必要がありますtop、right、bottom、leftプロパティで、ビューポートに対する位置を指定します。

/* 语法 */
position: fixed;

/* 常用组合：固定在顶部 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}

/* 固定在右下角 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

核心的な特徴

特徴1：ビューポートに対する配置

固定配置の要素は親要素の影響を受けず、常にブラウザウィンドウの表示領域に対して配置されます。

特徴2：ドキュメントフローから外れる

とabsoluteと同様に、fixed要素はドキュメント上のスペースを占有せず、周囲の要素は通常どおりに配置され固定配置された要素の存在を無視します。

特徴3：固定され、スクロールしても移動しない

これはfixedとabsoluteの重要な違いです：ページがどのようにスクロールしても、固定配置された要素は常に指定された位置に留まります。

特徴4：z-index の有効化

固定配置によってz-indexz-index プロパティが有効になり、要素のビューポート内での重なり順を制御できます。

実例

実例を通して、position:fixedposition: fixedの特性を深く理解しましょう。

例1：上部ナビゲーションバーの固定

これはfixedposition:fixed の最も一般的な使用シナリオです：ナビゲーションバーの固定。

例2：右下隅に固定された「トップに戻る」ボタン

固定配置は「トップに戻る」ボタンの作成にもよく使用されます：

例3：サイドバーの固定

固定配置はサイドバーの固定にも使用できます：

例4：下部に固定されたフッター

コンテンツが少ないページのフッターを下部に固定する必要がある場合があります：

例5：固定オーバーレイ

固定配置は全画面オーバーレイの作成にも使用できます：

注意事項

モバイル端末の互換性の問題：iOS Safari や一部のモバイルブラウザでは、position: fixed互換性の問題が発生する可能性があります。入力欄がフォーカスを取得すると要素が移動することがあります。解決策としては、-webkit-position: fixedを使用する、またはtransform: translateZ(0)を設定してハードウェアアクセラレーションを有効にします。

z-index の階層

固定配置された要素のz-indexz-index はビューポートに対して計算され、親要素に対してではありません。

絶対配置との違い

固定配置された要素が印刷されないようにする

@media print {
    .fixed-element {
        position: static;  /* 打印时取消固定定位 */
    }
}

よくある使用シナリオ

シナリオ1：上部ナビゲーションの固定

.nav-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
}

シナリオ2：戻るボタンの固定

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

シナリオ3：チャットウィンドウ

.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 400px;
}

まとめ

position: fixedは、固定 UI 要素を実装するための中心的な技術です：

• ブラウザのビューポートに対して配置され、親要素の影響を受けない
• 固定され、ページのスクロールに合わせて移動しない
• 要素はドキュメントフローから外れ、スペースを占有しない
• z-index を有効にしz-index、重なり順を制御できる
• 固定ナビゲーションバー、トップに戻るボタン、固定サイドバー、オーバーレイポップアップなどによく使用される
• モバイル端末では互換性の問題に注意が必要

CSS position プロパティ