Houn

position:fixedで固定ヘッダーnavを作ったら、直下の要素が隠れちゃったとき
2019.08.10

Web制作メモ

ヘッダーをposition:fixedで固定時、直下の要素が重なって隠れる原因と解決法

ヘッダーをスクロールしてもずーっと上部に固定して表示させるときは、position: fixedですよね。

固定ヘッダー前


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


その際、このようにメインコンテンツがヘッダーの下に重なって隠れてしまうときの原因と解決法です。

ヘッダーに直下コンテンツが隠れた

ヘッダーが”浮く”のが原因

まず原因を図解します。

もともと、下図の状態だったのが
固定ヘッダー前の構図

fixedさせるとこうなります。

headerが宙に浮いており、その下にmain部分が潜り込んでしまっています。

position: fixed;って、浮くんですね。floatと一緒です。

固定ヘッダー後の構図

ヘッダーの高さ分だけの余白を取る

それが分かれば対処法は簡単です。header直下の要素に、headerの高さ分だけの余白を取ってあげれば解決です。

余白を差し込んだ構図

bodyタグに当ててもOK

ちなみにこういった上部固定ヘッダーナビは、特殊な作りじゃなければサイト内すべてのページに適用されますよね。

であれば、そもそものbody要素にpadding当ててあげるのが良いかと思います。

Share on SNSシェア

Related 関連記事