html - 隐藏在 后面的网站导航栏

Question

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

头部 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

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

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