Houn

Web制作

公開日:2019.08.10

更新日:2023.04.28

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

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

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

固定ヘッダー前

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

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

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

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

まず原因を図解します。

もともと、下図の状態だったのが

fixedする前

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

固定ヘッダー後

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

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

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

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

paddingでも、高さ分のdivタグを差し込んでも良いでしょう。

余白を差し込んだ

bodyタグに当ててもOK

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

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

サイト保守費の決済を全自動でラクにしませんか?

Square定期請求書

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。

サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか?

便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。

当事務所ではSquare(スクエア)というサービスを3年以上利用中です。

導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。

手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する(Squareを利用)」という記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。

無料でSquareに登録してみる