固定ヘッダーが下に移動するのはなぜですか?どうすれば修正できますか?

固定設定にするとヘッダーが下に移動する

ここでは、マージンの崩壊として知られる問題が発生しています。ヘッダーを「position:fixed」にすると、ヘッダーがドキュメントの通常のフローから削除され、次の要素 (この場合はフォーム) の上マージンが本文の上マージンと一緒に折りたたまれます。これは HTML のデフォルトの動作です。

この問題を回避し、ヘッダーとフォーム間の垂直方向の間隔を維持するには、2 つのオプションがあります:

1. 無効にするマージンの折りたたみ:

   パディングトップの追加: 1px;マージンの崩壊を防ぐために、CSS の本文に追加します。この少量のパディングにより、折りたたみが効果的に解除され、フォームのマージンが有効になります。

2. 上部マージンの設定:

   上部を追加: [必要な値];ヘッダーの CSS に追加して、ビューポートの上部を基準とした垂直位置を明示的に設定します。これにより、折りたたまれたマージンが上書きされ、ヘッダーが目的の位置に残るようになります。

更新されたコード (オプション 1):

body {
  padding-top: 1px; /* disable margin collapsing */
}

更新されたコード (オプション) 2):

#header {
  top: 3rem; /* desired vertical position */
}

注:

Bootstrap や Materialsize CSS などのフレームワークを使用している場合は、それらを処理するためのルールがすでに設定されている可能性があります。マージンが崩れる。その場合、目的の配置を実現するには、これらのルールをオーバーライドするか、別のアプローチを使用する必要がある場合があります。

以上が固定ヘッダーが下に移動するのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。