固定位置でヘッダーを配置すると、デザインと重なってしまう

固定位置のヘッダーを使うと、スクロール時にヘッダーが常に画面上部に表示されます。

そのため、ページ上部付近の見出しや画像が、ヘッダーの高さ分だけ隠れてしまうことがあります。

固定位置のヘッダーは、通常のレイアウトとは別レイヤーで画面上部に重ねて表示されます。

このとき、ヘッダーのすぐ下にあるセクションやアンカーリンクの遷移先が、ヘッダーの高さを考慮せずに配置されていると、見出しや画像と重なって表示されてしまいます。

ヘッダーと重なっているセクションの上部に、ヘッダーと同じくらいの高さの余白を追加すると、重なりを防げます。

アンカーリンクの遷移先も同様に、見出しや画像がヘッダーに隠れないよう、リンク先となるセクションの上部に余白を確保します。