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應用於容器類，但不適用於菜單欄。

Answer 1

試試下面的CSS這樣的：

看到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的答案是正確的，只是添加

background-color: #fff您#gnb

Answer 3

的固定菜單 - 使用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>