CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのposition: fixed;とは？要素を画面に固定する方法を実例付きで解説

CSSの position: fixed; プロパティを使用すると、要素をビューポート（ブラウザの表示領域）を基準として配置できます。


このプロパティが適用された要素は、ページをスクロールしても画面上の同じ位置に固定され続けるのが特徴です。ヘッダーバーやフッター、SNSボタンなど、常に画面内に表示しておきたい要素の実装によく使われます。

position: fixed; のサンプルコード

以下のコードでは、div要素に対して position: fixed; を設定し、画面右下に固定表示しています。実際にコードを実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div{
            position: fixed;
            bottom: 0;
            right: 0;
            width: 200px;
            border: 3px solid blue;
         }
      </style>
   </head>
   <body>
      <h2>position: fixed;</h2>
      <p>position: fixed; プロパティを使うと、要素をビューポート基準で配置できます。</p>
      <div>
         div has position: fixed;
      </div>
   </body>
</html>

実行結果

上記コードを実行すると、青い枠線のdiv要素が画面の右下（bottom: 0; と right: 0; で指定した位置）に固定表示されます。ページをスクロールしても、この要素は常に同じ位置に留まります。

CSSのposition: fixed;とは？要素を画面に固定する方法を実例付きで解説

position: fixed; を使う際のポイント

  • 基準となる位置： fixed で配置された要素は、親要素ではなくビューポートを基準とします。
  • スクロールへの影響： スクロールしても要素は移動せず、常に画面上の指定位置に固定されます。
  • 文書フローからの除外： 固定配置された要素は通常の文書フローから外れるため、他のコンテンツとの重なりに注意が必要です。
  1. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

    CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に

  2. IntersectionObserverを使って要素がCSSのposition:stickyで固定されるタイミングを検出する方法

    position: stickyが適用された要素は、スクロールに応じて固定されますが、そのタイミングをJavaScriptで直接取得するAPIは存在しません。そこで便利なのがIntersectionObserver（交差オブザーバー）です。スティッキー要素にさまざまなCSSスタイルを組み合わせることで、要素が固定された瞬間を簡単に検出できます。 仕組みのポイント このテクニックでは、スティッキー要素の直前に配置した小さな「監視用」要素をIntersectionObserverで監視します。ページをスクロールしてスティッキー要素が画面上部に固定されると、監視用要素は完全にビューポート外に出るため