ページをスクロールしても要素を常にブラウザの表示領域（ビューポート）内の特定の位置に固定したいときに’position: fixed;’を使います。
画面最上部に固定されるグローバルナビゲーションや、スクロールしても常に表示させたい広告などによく使われます。
コード 例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>position: fixed 例</title>
<style>
body {
height: 2000px; /* スクロールを発生させるために広い高さを指定しておく */
padding-top: 50px; /* 今回する固定ボックスの高さ分、最上部に余白を作る */
}
.fixed-box {
position: fixed; /* これが画面上（ビューポート）に要素を固定する */
top: 0; /* 画面の上端から0px */
left: 0; /* 画面の左端から0px */
width: 100%; /* 画面幅いっぱい */
height: 50px; /* ボックスの高さ */
background-color: #e74c3c; /* 赤色 */
color: white;
text-align: center;
font-weight: bold;
line-height: 50px; /* 高さ（height）と同じ値にすることで縦位置が真ん中になる */
}
</style>
</head>
<body>
<div class="fixed-box">
`position: fixed` です！スクロールしても動きません。
</div>
<div>
<p>
このテキストは、ページをスクロールさせるためのダミーコンテンツです。
</p>
<p>
下にスクロールしてみてください。上の赤いボックスは、常に画面の一番上に留まっているはずです。
</p>
<p>
これが `position: fixed`
の基本的な挙動です。ヘッダーやフッター、サイドボタンなど、常に表示しておきたい要素に使われます。
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>ページの最後までスクロールしました。</p>
</div>
</body>
</html>
プレビュー
