ヘッダーの固定は position:fixed; 隙間対策はtop:0

プログラミングを勉強しているみなさん、こんにちは！

ヘッダー（header）の位置を固定したい。
サイトの下の方へスクロールしても、常に最上部にヘッダーは表示させたい。

よく使う手法ですね。

けど、
「CSSはいったいどうすればいいの？」
「あれ、どうやんだっけ？」

初めてトライする方、忘れてしまった方のために、紹介します。
（というか私自身のメモみたな感じですが（笑））

コード

CSSでposition:fixed;をヘッダー要素に設定しましょう。

見栄えを良くすると、コードが増えてわかりにくくなりますので、コードは必要最低限にとどめております。

「Result」の表示の方で、下にスクロールしてみてください。
ヘッダーが固定されているのがわかります。

「top:0;」は、画面の最上部のすきまを埋めるためです。

position:fixed;を設定すると、ヘッダーの上に微妙なすきまが生じてしまうケースがあります。

「ようし、固定できた！」
と思って、下にスクロールすると・・・

ヘッダーの上のすきまから、

「あれ、要素が見えてる！」

と気づくはずです。

それを防ぐため、「top:0;」をCSSでヘッダー要素に設定することにより、そのすきまを埋めます。

問題無ければ記述する必要はありませんが、
そうなってしまった方は、この「top:0;」を記述して解決です。

ヘッダーの下の要素に
「padding-top:100px;」
というのを設定しました。

これは何かというと。

ヘッダーにposition:fixed;を設定すると、
ヘッダーの下の要素が、ヘッダーと重なってしまうのです。

position:fixed;もfloatと同じで、要素が浮いた状態になります。
ですので、浮いたヘッダーの下に、ヘッダー直下の要素がもぐりこんで、
重なっているよう状態になります。

ですので・・・・

ヘッダーと重ならいように、padding-top　を設定して、下へずらしてあげるのです。
高さはヘッダーの高さと同じにしてくださいね。

これでposition:fixed;を設定しても慌てることはありませんね。

ヘッダーの上部にすきまができたらtop:0;、
ヘッダーの下の要素がもぐりこんだら、padding-top　です。

position:fixed;
top:0;
padding-top:〇〇px

この３つはセットで覚えておくと良いでしょう。

すきま関連の記事も紹介しておきます↓