固定ヘッダーによりコンテンツがプッシュダウンされます
ヘッダーにページのタイトルとナビゲーションバーを入れましたが、設定するとすぐに位置:固定;上部のマージンが増加しました。 Codepen へのリンクは次のとおりです:
マージン崩壊の問題に直面しています。ヘッダーを修正した後、フローから削除すると、フォームが最初のフロー要素になるため、その上部マージンは本文1の上マージンと重なってしまいます。これは、ボディの上部マージンが大きくなり、上部の値2を設定していないため、固定要素がボディを考慮して配置されることを意味します。
これを回避するには、次の必要があります。マージンの折りたたみを無効にするか (他の問題を回避するためにこれをお勧めします)、または要素を移動したい場所に上部の値を設定します。 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*/ }
1 [ボディにマージンが設定されていないため、このマージンは表示されません。要素とボディの間のスペースです。 ](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-collapse)
2 [方法の詳細を読むこれはこれで機能します](https://css-tricks.com/couple-margin-collapsing-gotchas/)
以上が固定ヘッダーによってコンテンツが押し下げられるのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。