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

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

固定ポジショニング（fixed positioning）を使用すると、スクロールの有無にかかわらず、要素をページ上の特定の位置に固定して表示できます。このとき指定する座標は、ブラウザウィンドウを基準とした相対的な位置になります。

positionプロパティとtop・leftの2つの値を組み合わせることで、HTML要素をドキュメント内の任意の場所へ移動させることが可能です。

移動方向と値の指定方法

  • 左へ移動 — leftに負の値を指定します。
  • 右へ移動 — leftに正の値を指定します。
  • 上へ移動 — topに負の値を指定します。
  • 下へ移動 — topに正の値を指定します。

コード例

以下のコードを実行すると、固定ポジショニングの実際の動作を確認できます。ページをスクロールしても、青色のボックスが常に同じ位置に表示され続けることがわかります。

<html>
    <head>
    </head>
    <body>
        <div style = "position:fixed; left:80px; top:20px; background-color:blue;color:white;">
           This div has fixed positioning.
        </div>
    </body>
</html>

この例では、position:fixedを指定したdiv要素が、ウィンドウ左端から80px、上端から20pxの位置に固定されます。ナビゲーションバーや「ページトップへ戻る」ボタンなど、常に画面に表示しておきたいUI要素の実装によく使われるテクニックです。

  1. CSSで固定フッター（スティッキーフッター）を作成する方法

    CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進