html - 视差横幅不适用于导航栏

Question

我遇到了一个问题，想知道是否有人可以提供帮助。我正在尝试为 uni 元素创建一个网站，但似乎无法使导航栏显示在横幅元素上方。此错误仅在我为横幅添加一些“视差”css 后发生。这是我网站的链接(很难解释) http://itsuite.it.brighton.ac.uk/ar707/mysite/

我附上了下面的css和html(我创建了一个单独的样式表，所以没有包含样式标签)

---

<div id="navcontainer">
  <ul id="navlist">
    <li><a id="logo" href="index.html"> </a></li>
    <li><a href="index.html">Home</a></li>
    <li><a href="guide.html">My Guide</a></li>
    <li><a href="contact.html">Contact Me</a></li>

  </ul>
</div>

<div id="wrapper">
  <!--The 'wrapper' div contains all the page content and can be styled -->
  <a id="top"></a>
  <!--anchoring the link from the bottom so that i can come to the top of the page-->

<header id="banner">
<!--The main heading for the page -->
    <h1>Anish's Learning Journal</h1>
    <!-- <img alt="Feel free to use these photos and videos in your work" src="images/dsc_0116.jpg"  > -->

</header>

Answer 1

你需要给你的导航一个 z-index 大于你的横幅的 z-index(默认为 0)，试试

#navcontainer {
background-color: #323232;
height: 43px;
width: 100%;
position: fixed;
top: 0;
opacity: .95;
z-index: 1;