ヘッダーを固定する

#画面上の要素を固定する
position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができます。
位置は、top、left、right、bottomを使って指定します。

index.html

<header></header>

style.css

header {
 position: fixed;
 top: 0px;
 left: 0px;
}

#要素の重なり順
positionを使用すると要素の重なりが生じます。
その結果、コンテンツ部分とヘッダーが重なった時に、ヘッダーが隠れてしまいます。
重なり順を指定して、ヘッダーが上に表示されるようにしましょう。

##要素の重なり順を指定する
z-indexプロパティは、要素の重なりの順序を指定する際に使用します。
z-indexは整数値で指定し、値が大きいほど上に表示されます。
z-indexプロパティは必ずpositionプロパティと併用する必要があるので、注意しましょう。

style.css

header {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
}