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

CSSのposition: fixedで要素を画面に固定表示する方法

position: fixed; を設定した要素は、ページをスクロールしても画面上の同じ位置に留まり続けます。これは、要素がビューポート（ブラウザの表示領域）を基準として配置されるためです。ヘッダーやナビゲーションバー、「トップへ戻る」ボタンなど、常に画面に表示しておきたいUI要素によく使われる手法です。

position: fixed の特徴

CSSの position プロパティに fixed を指定すると、次のような挙動になります。

  • スクロールしても要素が画面上の同じ位置に固定される
  • 配置の基準がビューポート（ブラウザウィンドウ）になる
  • 文書の通常フローから取り除かれるため、後続の要素がその分のスペースを詰めて表示される
  • top・right・bottom・left プロパティで細かく位置を指定できる

コード例

以下の例では、position: relative、position: absolute、position: fixed の3種類の配置方法を1つのページで比較できます。demo3 クラスの要素は bottom: 0; right: 20px; の指定により、画面右下に固定表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
    position: relative;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    width: 600px;
    height: 200px;
}
div.demo2 {
    position: absolute;
    color: white;
    background-color: orange;
    border: 2px dashed blue;
    top: 50px;
    right: 0;
    width: 300px;
    height: 100px;
}
div.demo3 {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 500px;
    border: 3px solid orange;
    color: blue;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
<div class="demo3">
position: fixed;
</div>
</div>
<p>This is another demo text.</p>
</body>
</html>

出力結果

CSSのposition: fixedで要素を画面に固定表示する方法

実際にページをスクロールしてみると、position: fixed を指定した要素だけが常に画面右下に表示され続けていることが確認できます。このように fixed を活用することで、スクロールに追従する固定ヘッダーや固定サイドバー、フローティングボタンなどを手軽に実装できます。なお、固定要素が他のコンテンツを覆い隠してしまう場合は、z-index や余白の調整も併せて検討するとよいでしょう。

  1. CSSの絶対配置（position: absolute）とは？使い方をサンプルコードで解説

    CSSにおける絶対配置（absolute positioning）とは、要素を「static以外のpositionプロパティが設定された、最も近い祖先要素」を基準として配置する方法です。position: absolute;を指定した要素は、top・right・bottom・leftといったオフセットプロパティを使って正確な位置を決定できます。絶対配置された要素は通常のドキュメントフローから取り除かれるため、他の要素のレイアウトには影響を与えません。この特性を活かすことで、要素の重ね合わせや中央寄せなど、柔軟なレイアウトが実現できます。サンプルコード1：絶対配置で要素を中央に配置する以下は、C

  2. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

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