ホームページ > ウェブフロントエンド > CSSチュートリアル > 固定ヘッダーによってコンテンツが押し下げられるのはなぜですか? どうすれば修正できますか?

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

Mary-Kate Olsen
リリース: 2024-12-16 15:32:18
オリジナル
385 人が閲覧しました

Why Does My Fixed Header Push Down My Content, and How Can I Fix It?

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

ヘッダーにページのタイトルとナビゲーションバーを入れましたが、設定するとすぐに位置:固定;上部のマージンが増加しました。 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート