固定ヘッダーによってコンテンツが押し下げられるのはなぜですか? どうすれば修正できますか?

固定ヘッダーによりコンテンツがプッシュダウンされます

ヘッダーにページのタイトルとナビゲーションバーを入れましたが、設定するとすぐに位置:固定;上部のマージンが増加しました。 Codepen へのリンクは次のとおりです:

マージン崩壊の問題に直面しています。ヘッダーを修正した後、フローから削除すると、フォームが最初のフロー要素になるため、その上部マージンは本文¹の上マージンと重なってしまいます。これは、ボディの上部マージンが大きくなり、上部の値²を設定していないため、固定要素がボディを考慮して配置されることを意味します。

これを回避するには、次の必要があります。マージンの折りたたみを無効にするか (他の問題を回避するためにこれをお勧めします)、または要素を移動したい場所に上部の値を設定します。 want.

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

#header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
    top:0px; /*Add a top value to place it*/
}

¹ [ボディにマージンが設定されていないため、このマージンは表示されません。要素とボディの間のスペースです。 ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)

² [方法の詳細を読むこれはこれで機能します](https://css-tricks.com/couple-margin-collapsing-gotchas/)

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