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>