ヘッダー要素がナビゲーション要素に埋め込まれています

ヘッダーが異なる要素であるため、ヘッダーがナビゲーションバーに埋め込まれている理由がわかりません。喜びのないナビゲーションの下にヘッダーが必要です。期待してくれてありがとう。 Link:https://jsfiddle.net/a6jxea0v ヘッダー要素がナビゲーション要素に埋め込まれています

出典

2016-06-15 Dean Hampson

あなたが定位置にセットあなたのnav要素を持っています。これにより相対的な位置付けから取り除かれ、画面の上部に固定されます。ヘッダー要素は文書内で一番上に残り、画面の上部に表示されます（ヘッダーの後ろに隠れています）。CSSで作業するだけで済みます。それが私だったら、相対位置付けされた要素の上部にマージン/パディングを追加するだけで、内容によってnav要素がクリアされます。これを修正する別の方法は、nav要素から 'position：fixed;'を削除するだけです。 – zipzit

ありがとう、zipzit！私は固定位置要素がドキュメントフローから削除されていることを知らなかった！ –

あなたのナビゲーションバーはそうあなたがナビゲーションバーの高さごとにトップの間隔を追加する必要があるので、体の先頭から開始するヘッダーの位置を固定しているので、あなたのヘッダにpadding-top:45px;を追加します。ここで

header { 
    width: 100%; 
    margin: 0; 
    padding:45px 0 0; 
    color: #000; 
}

はjsfiddleです：https://jsfiddle.net/a6jxea0v/2/

出典

2016-06-15 05:38:26

こんにちは、Mukesh。パディングを使用せずにナビゲーションバーを元の位置（画面の最上部）に戻す追加の方法はありますか？ヘッダー要素がナビゲーションに表示される理由をご存知ですか？ –

あなたはnavbarを固定しているので、ヘッダーはボディの一番上の位置から開始し、navbarの下に隠れます –

ありがとうございました。 –

ヘッダー要素がナビゲーション要素に埋め込まれています

答えて

関連する問題