隐藏在<main>后面的网站导航栏

Question

我正在建立一个网站，并试图实现一个固定的导航栏。

HEAD HTML：

<header id="header" style="background: url(images/bg.png);background-position:center bottom; width: 100%; background-repeat: no-repeat; height:550px;-webkit-background-size: cover; -moz-background-size: cover;
-o-background-size: cover;background-size: cover;">

<div class="nav-menu">
  <div id="nav-menu-container">
    <ul>
      <li class="menu-active">home</li>
      <li><a href="blog.html">blog</a></li>
      <li><a href="books.html">books</a></li>
    </ul>
  </div>
</div>
  </header>

正如您所看到的，我有一个标题的背景图像，当我滚动时，导航工作完全保持固定在屏幕顶部，因为图像慢慢向上滚动。

然而，当我滚动到足以点击我的内容的开头时，导航栏就会消失。

（在标题关闭后以及导航消失后开始的代码片段）

   <main> 
  <section id="intro">
    <div id="introleft">
        <h1>left</h1>
    </div>
    <div id="introright">
        <h1>right</h1>
    </div>
  </section>

CSS：

.nav-menu {
width: 100%;
height: 0 auto;
margin: 0 auto;
padding:auto;
background-color: black;
position: fixed;
top: 0;
}
.nav-menu ul {
    width:100%;
    margin:0 auto;
    padding:0;
    list-style:none;
    overflow: hidden;
    text-align: center;
}
.nav-menu li {
    float: left;
    margin:0;
    padding:0;
    padding: 15px 10px; 
    vertical-align:middle;
    display:inline-block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.nav-menu li a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}
.nav-menu li a:hover {
    color: grey;
}
.menu-active {
    vertical-align:middle;
    display:inline-block;
    color: white;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
}

Answer 1

您可以尝试在css中增加导航栏的z-index。

.nav-menu {
z-index:1;
}