Houn

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

Web制作メモ

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

こんな感じでレイアウトを組んでですね。

固定ヘッダー前

このヘッダー部をスクロールしてもずーっと上部に固定して表示させたいので、position: fixedさせます。


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


すると

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

あら・・

”サイトタイトル”が、ヘッダーの下に重なって隠れちゃいました。これってどういう事かと言いますと、もともとこうだったのが・・
固定ヘッダー前の構図

固定ヘッダー後の構図

こうです。headerが宙に浮いてますね。その下にmain部分が潜り込んじゃってます。

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

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

余白を差し込んだ構図

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

であれば、そもそものbody要素にpadding当ててあげても同じくいい感じになります。

Share on SNSシェア

Related 関連記事