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>
	</div>

CSS

当我向下滚动时，固定的菜单栏（徽标图像和一些列表）位于页面顶部。

但是，有一个问题。 当我将 position:fixed 应用于#gnb（在上面的示例中）时， 我之前制作的背景颜色（白色）消失了。不知道具体是什么问题。。

我也想保留背景颜色的效果。

• 我正在将 Bootstrap 应用于容器类，但不适用于菜单栏。

Answer 1

为什么背景颜色会消失？

好吧，你为你的容器元素设置了颜色，并且没有任何其他规范，子元素继承了白色背景（这就是你用粉红色覆盖它的原因！）

将您的 Header 设置为 position: fixed 将 #gnb 元素与其父元素分离，因此它没有任何背景颜色，直到您指定一个并且下面元素的颜色可见（即粉红色）。所以你必须再次手动将颜色设置为白色。

所以Jainam的答案是正确的，加一下

background-color: #fff 到你的#gnb

Answer 2

试试下面的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 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>
	</div>