如图所示如何添加导航栏？ （HTML CSS）

Question

我正在制作一个具有视差滚动效果的网站。我试图像第一张图片一样添加一个导航栏。 但它总是停留在图片上方，我在 css 中尝试了很多东西，但没有结果。

<!-- https://codepen.io/Yung_n-d/pen/mdwQGqX -->

The navbar is above the image

Answer 1

您可以将position:fixed 与其position(x and y axis)、width 和z-index 组合设置以使其可见

  html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

.p-content {
  width: 100%;
  height: 100%;
  margin: auto;
}
.p-content01 {
  width: 100%;
  height: 100%;
  margin: auto;
  background: url(https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  top: 0;
  bottom: 0;
  display: table;
}
.p-content01_inner {
  max-width: 450px;
  min-width: 320px;
  width: 100%;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.p-content01_inner h1 {
  font-family: "Century Gothic", sans-serif;
  color: #f9f8f7;
  font-size: 40px;
  text-shadow: 0 0 300px #ff0;
}
.p-content01_inner a {
  color: #f9f8f7;
  font-family: "Century Gothic", sans-serif;
  text-decoration: none;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.2s ease-out;
}
.p-content01_inner a:hover {
  color: #bd7286;
  border: 2px solid #bd7286;
  transition: all 0.2s ease-in;
}
.p-content02 {
  max-width: 750px;
  min-width: 320px;
  width: 100%;
  margin: auto;
}
.p-content02 p {
  font-size: 100%;
  color: #3c2f2f;
}
.p-content03 {
  width: 100%;
  height: 100%;
  margin: auto;
  background: url(https://images.pexels.com/photos/1089451/pexels-photo-1089451.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  top: 0;
  display: table;
}
.p-content03_inner {
  max-width: 450px;
  min-width: 320px;
  width: 100%;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.p-content03_inner h2 {
  font-family: "Century Gothic", sans-serif;
  color: #f9f8f7;
  font-size: 40px;
  text-shadow: 0 0 300px #ff3c41;
}
.p-content03_inner a {
  color: #f9f8f7;
  font-family: "Century Gothic", sans-serif;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.2s ease-out;
}
.p-content03_inner a:hover {
  color: #3e7757;
  border: 1px solid #3e7757;
  transition: all 0.2s ease-in;
}

.nav-bar {
    height: 70px;
    margin-top:30px;
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  }
   
  .brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 70px;
    text-transform: uppercase;
    font-size: 1.4em;
  }
  .brand a img {
   max-height: 70px;
  }
  .brand a,
  .brand a:visited {
    color: #ffffff;
    text-decoration: none;
  }
   
  .nav-container {
    max-width: 1000px;
    margin: 0 auto;
  }
   
  nav {
    float: right;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    float: left;
    position: relative;
  }
  nav ul li a,
  nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 70px;
    color: #fff;
    text-decoration: none;
  }
#dropdwnBk{
    background: linear-gradient(90deg, #4158d0 0%, #6356cc 25%, #8154c8 50%, #a252c4 75%, #c850c0 100%);
}



  nav ul li a:hover,
  nav ul li a:visited:hover {
    color: #ffffff;
    text-decoration: none;
  }
  
  nav ul li a:not(:only-child):after,
  nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
  }
  nav ul li ul li {
    min-width: 190px;
  }
  nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
  }
   
  .nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  }
  

  
  .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 70px;
    width: 70px;
  }
   
  @media only screen and (max-width: 798px) {
    .nav-mobile {
      display: block;
    }
   
    nav {
      width: 100%;
      padding: 70px 0 15px;
    }
    nav ul {
      display: none;
    }
    nav ul li {
      float: none;
    }
    nav ul li a {
      padding: 15px;
      line-height: 20px;
   padding-left: 25%;
   
    }
    nav ul li ul li a {
      padding-left: 30%;
    }
   
    .nav-dropdown {
      position: static;
    }
   .brand a img {
   max-height: 60px;
   margin-top: 5px;
   }
  }
  @media screen and (min-width: 799px) {
    .nav-list {
      display: block !important;
    }
  }
  #nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
  }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  #nav-toggle span:before {
    top: -10px;
  }
  #nav-toggle span:after {
    bottom: -10px;
  }
  #nav-toggle.active span {
    background-color: transparent;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
  }
  #nav-toggle.active span:before {
    transform: rotate(45deg);
  }
  #nav-toggle.active span:after {
    transform: rotate(-45deg);
  }

<section class="nav-bar">
  <div class="nav-container">
    <div class="brand">
      <a href="index.php"><img src="img/heart.gif"></a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span class="material-icons"></span></a></div>
      <ul class="nav-list selected">
      <li>
            <a href="index.php">Home</a>
        </li>
        <li>
          <a href="view.php">Gallery</a>
        </li>
        <li>
          <a href="download.php">Download</a>
        </li>
        <li>
            <a href="logout.php">Log out</a>
        </li>
        <li>
          <a href="#">Over ons</a>
          <ul id="dropdwnBk" class="nav-dropdown">
            <li>
              <a  href="aboutMe.php">Nathanael Dousa</a>
            </li>
            <li>
              <a href="wife.php">Gritchaya Taengthai (Wie weet dousa binnekort)</a>
            </li>
            <li>
              <a href="us.php">Us <3</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</section>  
<div id="top" class="p-content">
    <section class="p-content01">
      <div class="p-content01_inner">
        <h1>LITTLE CODE</h1>
        <a href="#">GET STARTED</a>
      </div>
    </section>
    <section class="p-content03">
      <div class="p-content03_inner">
        <h2>PARRALAX</h2>
        <a href="#top" >link code</a>
      </div>
    </section>
    <section class="p-content02">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vel ducimus nihil quod incidunt iste delectus, assumenda, molestiae, quia neque dolores rerum accusantium a doloremque commodi? Sapiente iusto ipsam rem obcaecati, error maiores expedita
        itaque saepe architecto ea at assumenda fugit, numquam ex corporis! Dolor!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum voluptatum neque deserunt, adipisci, molestias veniam consequatur ipsa earum expedita repudiandae incidunt quam eligendi sunt optio similique sequi non ad praesentium tempora alias. Sint
        error quod dolor vero accusantium maxime a, iste eveniet laudantium? Delectus, iure!</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, porro quidem. A fuga iure quos sapiente facilis? Distinctio officia pariatur id provident adipisci architecto eligendi eveniet, labore nihil ratione. Velit dolor praesentium nihil exercitationem,
        officia quam at corporis illo reprehenderit dignissimos ipsa, magnam quos laborum aperiam cupiditate. Velit ab exercitationem quos inventore voluptas ratione non repellat, quas autem eligendi architecto, numquam dolores eos ducimus impedit dolorum
        quia incidunt nobis molestias sunt quidem? Consectetur quos at minima, vel similique cumque. Nisi hic aspernatur recusandae pariatur sapiente! Repellat itaque, necessitatibus perspiciatis nemo veritatis similique, voluptates veniam alias temporibus
        impedit distinctio laboriosam debitis.</p>
    </section>
  </div>

更新 Codepen here