Why Does My Fixed Header Shift Downward After Setting `position: fixed;`?

タイトルバーを固定に設定すると下に移動するのはなぜですか?

質問内容

タイトルバーがページタイトルとナビゲーションバーの間に配置されているのですが、position:fixedにすると余白が増えてしまいました。。以下は Codepen リンクです:

[Codepen link]

質問の回答

マージン崩壊 と呼ばれる問題が発生しました。問題。タイトルバーを固定に設定すると、通常のドキュメントフローから外れます。したがって、フォームは最初の通常のドキュメントフロー要素になります。これは、フォームの上マージンが折りたたまれる、またはbody要素の上マージンと重なることを意味します。 ¹

これは、上部の値を設定していないため、ボディ要素の上マージンが大きくなり、固定要素がボディに対して相対的に配置されることを意味します。 ²

この状況を回避するには、次の方法を選択できます:

余白折りを無効にする (推奨): これは機能します回避マージン崩壊やその他多くの問題。
上位値の設定: タイトルバーを希望の位置に移動します。

解決されたコード:

< pre>

body {
padding-top:1px; /余白折りを無効にする/
}

#header{

background-color:#191919;
height:3rem;
width:100%;
position:fixed;

ログイン後にコピー

}

header-img{

フォントファミリー: 'パーマネントマーカー'、筆記体;
color:white;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:none;
表示:フレックス;
フロー方向:行;
justify-content:space-around;
}

nav-bar{

background-color:#191919;
float:left;
width:100%;
}

form{

margin-top:45rem;
margin-left:25%;
margin-right:25%;
}

img{
width:70%;
高さ:70%;
}

a {
text-decoration:none;
font-family: 'Work Sans'、筆記体;
color:white;
font-size:12px;
}

メール{

width:100%;
box-shadow:3px 3px 5px grey;
}

submit{

font-family:'Roboto'、筆記体;
font-size:14px;
font-weight:bold;
color:#686868;
ボックスシャドウ:3px 3px 5px grey;
パディング: 5px 5px;
}

.catalog{
margin-left:10%;
margin-right:10%;
margin-top: 5rem;
幅:90%;
float:left;
}

パスワード{

width:100%;
box-shadow:3px 3px 5pxグレー;
}

ビデオ{

margin-top:5rem;
margin-left:25%;
margin-right:25%;
width:50%;
}

コース{

display:flex;
flow-direction:row;
flex-wrap:wrap;
}

説明{

フォントファミリー: 'Oswald', cursive;
font-size: 20px;
text-align:center;
font-size:16px;
}

li{
パディング: .25rem .5rem;
}

a:hover{
color:#4ba0c8;
}

.nav-link{

}

.course-label{
font-family: 'Baloo Bhaijaan'、筆記体;
font-size:18px;
}

.images{

background-color:#191919;
height:3rem;
width:100%;
position:fixed;

ログイン後にコピー

}

.images:hover{
背景色:#99d3ff;
color:#99d3ff;
}

@media (min-width:555px){
#nav-bar{

margin: 5% 5%;
padding: 3% 3%;
width: 10vw;
height:10vw;
color:#d2d2d2;

ログイン後にコピー

}

#form{

float:right;
width:20rem;
margin-right:1rem;

ログイン後にコピー

}
}
@media (min-width:360px) {
、{

margin-top:5rem;

ログイン後にコピー

}
#description{

font-size:16px;

ログイン後にコピー

}
#header-img{

font-size:20px;

ログイン後にコピー

}
#header{

font-size:30px;

ログイン後にコピー

}
}

 <h1> <nav id="nav-bar"><pre class="brush:php;toolbar:false">height:4.5rem;

ログイン後にコピー

<ul>
  <li><a href="#">Community</a><li>
  <li><a href="#courses"><b>Catalog</b></a><li>
  <li><a href="#">Pricing</a><li>
</ul><p></div><br> <div> <div><pre class="brush:php;toolbar:false"><hr></p>
<p></div><br> <div><pre class="brush:php;toolbar:false"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" alt="python">
<p></p>
</div>
</div>

ログイン後にコピー

以上が「position:fixed;」を設定した後、固定ヘッダーが下に移動するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：純粋な JavaScript のみを使用してサイズ変更可能な HTML 要素を作成するにはどうすればよいですか? 次の記事：`$(...).DataTable` が関数ではないのはなぜですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事