個人開発者をサポートするQ&Aツール

個人開発者・フリーランスエンジニア・リモートプログラマの
問題解決をサポートするサービスです

登録不要ですぐに質問を開始できます

ヘッダーをposition: fixedで固定するとスクロールした時にコンテンツが重なる

解決済 60pt 2件

ウェブサイトのヘッダーを画面上部に固定しようとして、CSSでposition: fixedを指定しました。

ヘッダーは上に固定表示されるようになりましたが、下にスクロールしていくとコンテンツが全てヘッダーの上に重なってしまうようになってしまいました。

スクロールするとヘッダーの下に配置してあるコンテンツが全てヘッダーの上を通過していきます。

まるでヘッダー部分がコンテンツ部分よりも低いレイヤーに配置されているかのような挙動です。

解決方法を自分なりに調べたところ、以下の解答例があったので試してみましたが全てうまくいきませんでした。

  • margin:topを指定する
  • コンテンツ部分にpaddingを設定する
  • scroll-padding-topを設定する

もし原因がわかる方がいましたら教えてください。

ソースコード


[HTML]

<html>
  <body>
    <header>ヘッダー部分</header>
    コンテンツ
  </body>
</html>

[CSS]

header{
  position: fixed;
}
html css
ベストアンサーに選ばれた回答
書いてあるソースコードだけでは原因がよくわかりませんが、

まるでヘッダー部分がコンテンツ部分よりも低いレイヤーに配置されているかのような挙動です。

と感じるのであればz-indexを指定してみたらどうですか?

z-indexは順番の重なりを変更できます。
詳細はこちらをご覧いただくとして、以下のようにしてみてはどうでしょうか?

header{
  position: fixed;
  z-index : 2;
}

body{
  padding-top:30px;/* ヘッダーと同じ高さ */
  z-index: 1;
}

回答の編集

この質問はすでに終了しているため変更できません

ちゃんとヘッダーが上に表示されるようになりました!ありがとうございます!

名もなきエンジニアのプロフィール画像 名もなきエンジニア
position: fixedを指定すると、その部分(ヘッダー)が重なります。
なのでヘッダー分の高さをbodyに指定してください

header{
  position: fixed;
  height  :30px;/* ヘッダーの高さ */
}

body{
  padding-top:30px;/* ヘッダーと同じ高さ */
}

回答の編集

この質問はすでに終了しているため変更できません

すみません、私の書いたソースコードには記載されてませんが、すでにその指定はしてます。また、私の言っている「重なり」とは、ヘッダーとボディの重なりではなく、ヘッダーにコンテンツが重なる状態のことです

名もなきエンジニアのプロフィール画像 名もなきエンジニア

回答

この質問はすでに終了しているため、回答できません