先生と生徒の会話形式で理解しよう

生徒

「先生、スクロールしてもボタンやヘッダーを画面の同じ場所に固定したいです。どうすればいいですか？」

先生

「その場合はCSSのpositionプロパティでfixedを使います。fixedを指定すると、その要素はブラウザの画面を基準に固定され、スクロールしても常に同じ位置に表示されます。」

生徒

「absoluteやrelativeとどう違うんですか？」

先生

「absoluteは親要素を基準に位置を決めますが、fixedは画面そのものを基準にするので、ページをスクロールしても動きません。主にヘッダーやフッター、サイドメニューで使います。」

1. fixedを使った要素の基本的な使い方

CSSでposition: fixedを設定すると、要素は画面上の位置を固定できます。スクロールしても動かないので、ユーザーが常に確認できるボタンやナビゲーションに適しています。top、right、bottom、leftを組み合わせることで、画面のどの位置に固定するかを調整できます。

例えば、画面の右下に常に表示される「トップへ戻るボタン」を作ることができます。

2. 固定ボタンのHTMLとCSS例

以下の例では、position: fixedを使って画面右下にボタンを固定しています。ユーザーがページをスクロールしても常に表示されます。


<style>
    .fixed-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
    }
</style>

<div class="fixed-button">トップへ戻る</div>

ブラウザ表示