固定ヘッダーが予期せずドロップダウンしてしまうのはなぜですか?

position:fixed を使用すると、ヘッダーが予期せず下に落ちます?

ヘッダーを固定した後、突然下に移動して、マージントップが使用した場所に大きな空白スペースが残りますであること。これを修正する方法は次のとおりですが、まず問題を理解しましょう。

マージンの折りたたみとブロックの書式設定コンテキスト

要素にposition:fixedを設定すると、その要素はフローから削除されます。ドキュメントに保存され、ブロック フォーマッティング コンテキスト (BFC) のルールの影響を受けなくなります。これは、ヘッダーのマージンやパディングが要素の高さに寄与せず、後続の要素のマージンが本文の上マージンと一緒に折りたたまれることを意味します。

修正方法

この問題を解決するには 2 つの方法があります:

マージン折りたたみを無効にする

マージンを無効にするには折りたたむと、padding-top: 1px を に追加できます。要素。これにより、ページの上部に 1 ピクセルの小さなギャップが作成され、余白が崩れるのを防ぎます。

ヘッダーの上部の値を設定します

これを修正するもう 1 つの方法は、ヘッダーの最上位の値。これにより、ヘッダーが指定された量だけ下に移動し、後続の要素の余白のためのスペースが確保されます。

要約

使用時にヘッダーが予期せず下に移動していることに気付いた場合は、位置: 固定。マージンの崩壊が原因である可能性があります。これを修正するには、2 つのオプションがあります。本文に小さなマージンを追加してマージンの折りたたみを無効にするか、ヘッダー要素の上部の値を設定します。

以上が固定ヘッダーが予期せずドロップダウンしてしまうのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。