CSSの位置：固定 - 背景色が消え

Question

これは一例です：https://jsfiddle.net/5ahw3tec/

HTML

html body { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    text-decoration: none; 
 
    font-family: 'Noto Sans KR', sans-serif; 
 
    list-style: none; 
 
} 
 

 
    a { 
 
    text-decoration: none; 
 
} 
 

 
    body { 
 
    background: lightgrey; 
 
    margin: 0; 
 
} 
 

 
    .container { 
 
    background-color: #ffffff; 
 
    width: 1280px; 
 
    padding: 0; 
 
} 
 

 
    #gnb { 
 
    width: 1280px; 
 
    height: 80px; 
 
    z-index: 100; 
 
    position: fixed; 
 
} 
 

 
    #gnb .header-area img { 
 
    position: relative; 
 
    top: 25px; 
 
    left: 80px; 
 
} 
 

 
    #gnb .header-area nav { 
 
    position: relative; 
 
    width: 930px; 
 
    left: 280px; 
 
} 
 

 
    #gnb .header-area ul { 
 
    list-style: none; 
 
    display: flex; 
 
    padding: 0; 
 
} 
 

 
    #gnb .header-area li { 
 
    margin-left: 80px; 
 
} 
 

 
    #gnb .header-area li a { 
 
    color: #333333; 
 
} 
 

 
    #gnb .header-area li:nth-of-type(1) { 
 
    margin-left: 0; 
 
} 
 

 
    #gnb .header-area li a:hover { 
 
    color: #18d28b; 
 
    text-decoration: none; 
 
} 
 

 
    main { 
 
    width: 100%; 
 
    height: 800px; 
 
    background: pink; 
 
}

<div class="container"> 
 
    <header id="gnb"> 
 
    <div class="header-area"> 
 
    <a href="#"> 
 
     <img src="somelogo" alt=""> 
 
    </a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">HELLO</a></li> 
 
     <li><a href="#">HELLO</a></li> 
 
     <li><a href="#">HELLO</a></li> 
 
     <li><a href="#">HELLO</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<main> 
 

 
</main> 
 

 
<footer> 
 

 
</footer> 
 
\t </div>

CSS

私はスクロールダウン、固定メニューバー（ロゴ画像といくつかのリスト）は、ページの上部にあります。

しかし、問題があります。 ポジション：#gnb（上の例）に固定した場合、先に作った背景色（白）は消えています。 私は問題が正確に何かを知らない。

私は背景色の効果も保ちたい。

• コンテナクラスにBootstrapを適用しますが、メニューバーには適用しません。このため、CSS、以下の

Answer 1

試してみてください。

が見Fiddle Demo

CSS：

html body { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    text-decoration: none; 
    font-family: 'Noto Sans KR', sans-serif; 
    list-style: none; 
} 

a { 
    text-decoration: none; 
} 
/* End global */ 

body { 
    background: lightgrey; 
    margin: 0; 
} 

.container { 
    background-color: #ffffff; 
    width: 100%; 
    padding: 0; 
} 

#gnb { 
    width: 1280px; 
    height: 80px; 
    z-index: 100; 
    position: fixed; 
    background-color: #fff; 
} 

#gnb .header-area img { 
    position: relative; 
    top: 25px; 
    left: 80px; 
} 

#gnb .header-area nav { 
    position: relative; 
    width: 930px; 
    left: 280px; 
} 

#gnb .header-area ul { 
    list-style: none; 
    display: flex; 
    padding: 0; 
} 

#gnb .header-area li { 
    margin-left: 80px; 
} 

#gnb .header-area li a { 
    color: #333333; 
} 

#gnb .header-area li:nth-of-type(1) { 
    margin-left: 0; 
} 

#gnb .header-area li a:hover { 
    color: #18d28b; 
    text-decoration: none; 
} 

main { 
    width: 100%; 
    height: 800px; 
    background: pink; 
} 

Answer 2

なぜ背景色が消えるのでしょうか？ （あなたがピンク色でそれをオーバーライドする理由です！）

さて、あなたはあなたのコンテナ要素に色を設定し、それ以外の仕様はせずに、子要素は、白い背景を継承

切り離すposition: fixedにあなたのヘッダーを設定します#gnb親からの要素です。その要素を指定し、下の要素の色が見える（ピンク色になる）まで、背景色はありません。したがって、手動で色を再び白に設定する必要があります。

のでJainamの答えが正しいか、単に固定メニューのためにあなたの#gnb

Answer 3

に

background-color: #fffを追加 - margin-topを使用し、top: 0

html body { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    text-decoration: none; 
 
    font-family: 'Noto Sans KR', sans-serif; 
 
    list-style: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
body { 
 
    background: lightgrey; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    background-color: #ffffff; 
 
    width: 1280px; 
 
    padding: 0; 
 
} 
 

 
/*new */ 
 
header { 
 
    background-color: #ffffff; 
 
} 
 

 
#gnb { 
 
    width: 1280px; 
 
    height: 80px; /* based on this height */ 
 
    z-index: 100; 
 
    position: fixed; 
 
    top: 0; /* new */ 
 
} 
 

 
#gnb .header-area img { 
 
    position: relative; 
 
    top: 25px; 
 
    left: 80px; 
 
} 
 

 
#gnb .header-area nav { 
 
    position: relative; 
 
    width: 930px; 
 
    left: 280px; 
 
} 
 

 
#gnb .header-area ul { 
 
    list-style: none; 
 
    display: flex; 
 
    padding: 0; 
 
} 
 

 
#gnb .header-area li { 
 
    margin-left: 80px; 
 
} 
 

 
#gnb .header-area li a { 
 
    color: #333333; 
 
} 
 

 
#gnb .header-area li:nth-of-type(1) { 
 
    margin-left: 0; 
 
} 
 

 
#gnb .header-area li a:hover { 
 
    color: #18d28b; 
 
    text-decoration: none; 
 
} 
 

 
main { 
 
    margin-top: 80px; 
 
    /* new - based on height given at #gnb */ 
 
    width: 100%; 
 
    height: 800px; 
 
    background: pink; 
 
}

<div class="container"> 
 
    <header id="gnb"> 
 
    <div class="header-area"> 
 
    <a href="#"> 
 
     <img src="somelogo" alt=""> 
 
    </a> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">HELLO</a></li> 
 
     <li><a href="#">HELLO</a></li> 
 
     <li><a href="#">HELLO</a></li> 
 
     <li><a href="#">HELLO</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<main> 
 
    some text 
 
</main> 
 

 
<footer> 
 

 
</footer> 
 
\t </div>