Question

我正在建立目标网页，想知道为什么我的导航栏无法正常工作。我的格式正确，但是我遇到的一个问题是，当我向下滚动文本时，该文本会穿过导航栏/标题，而导航栏/标题应该在其后面，或者在向下滚动时不可见。有人知道我可以解决此问题的方法吗？这是我的代码：

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Vanderlay Industries</title>
</head>

<body>

  <header id="header">
    <img id="header-img" src=http://nextarts.info/wp-content/uploads/art-vandelay-06-quotplaying-with-powerquot-art-vandelay.jpg alt="Vanderlay President">
    <div>
      <h1>Vandelay Industries, Inc.</h1>
      <p id="subtitle">Importer/Exporter of Fine Latex Goods</p>
    </div>

    <div>
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#demonstration">Demonstration</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
    </div>
  </header>

  <div id="features">
    <h2 class="title">Features</h2>

    <div id="fine">
      <h3 class="title">Fine</h3>
      <img id="fine-image" src="https://f4.bcbits.com/img/0007459691_10.jpg" alt="Fancy Fine Lettering">

      <p class="description">What we sell is always of the finest quality. Founded on February 12, 1992; no higher standard of fine has been met. Whether it be the local fire department or public water supply, we've set the bar for the finest. With Vandelay, you'll always be
        enjoying the finer things</p>
    </div>
    <div id="Latex">
      <h3 class="title">Latex</h3>
      <div>
      <img id="latex-image" src="http://mjtrends.b-cdn.net/images/product/963/pearlsheen-metallic-blue-latex-sheeting_370x280.jpg" alt="Latex Image">
      </div>
      <p class= "description">Our latex is so strong you couldn't even fabricate it. Or make a ficticious firm about it. That's how authentic our latex is. Try it today.</p>
    </div>
    <div id="Goods">
      <h3 class="title">Goods</h3>
      <img id="goods-image" src="http://wefirstbranding.com/wp-content/uploads/2010/09/virtual-goods1.jpg" alt="Pile of Goods">
      <p>If you got the goods, you got the goods. And we got em. Lots of em. Whether it be potato chips or diapers, the goods at our firm are plentiful.</p>
    </div>
  </div>
  <br><br><br>
  <div id="demonstration">
    <h2>Latex Demonstration</h2>
    <iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/p8qnYz5jHag"></iframe>
    <p>Take the pleasure of viewing a sublime presentation of latex</p>
  </div>
  <div id="pricing">
    <div class="productLabel">
      <h4>Latex 1</h4>
    </div>
    <div class="price">
      <h3>$1,000</h3>
      Our base model. Very popular option.
    </div>
    <div class="productLabel">
      <h4>Latex 2</h4>
    </div>
    <div class="price">
      <h3>$5,000</h3>
      A more luxury material from the far land of Bosco.
    </div>
    <div class="productLabel">
      <h4>Latex 3</h4>
    </div>
    <div class="price">
      <h3>$10,000</h3>
      The finest we offer, genetically superior good through marine biology.
    </div>
  </div>
  <section>
    <p>For more information, please enter your email below. We will be happy to send you a free latex demonstration!</p>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label for=email>Enter your email address:</label>
      <input id="email" type=email name="email" required>

      <input id="submit" type="submit" value="Submit">
    </form>
  </section>
  <footer>
    &copy; Vandelay Industries Inc.
  </footer>

CSS：

body {
  background: rgba(0, 0, 128, 90%);

  color: #f7ed36;
}

#nav-bar {
  color: #f7ed36;
  display: flex;
  position: relative;
  flex-direction: row;
}

ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  color: #f7ed36;
  position: relative;
  left: 250px;
  top: 25px;
}

header {
  position: fixed;
  display: flex;
  top: 0px;
  width: 100%;
  height: 90px;
  background: rgba(0, 0, 128, 90%);

}
#subtitle {
  font-style: italic;
  position: relative;
  bottom: 17px;
  left: 5px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li a {
  display: block;
  color: white;
  text-align: right;
  padding: 10px 20px 10px;
  text-decoration: none;
}

.title {
  text-align: center;
}

#header-img {
  float: left;
  width: 80px;
  height: 80px;
}
.description {
  align: baseline;
  text-align: justify;
  display: inline;
  margin-left: ;
}

#features{
  position: relative;
  top: 100px;

}

#fine-image {
  width: 10%;
  height: 10%;
  margin: 10px;

}
#latex-image {
  width: 10%;
  height: 10%;
  position: relative;

  margin: 10px;

}
#goods-image {
  width: 10%;
  height: 10%;
  margin: 10px;

}

任何想法都值得赞赏。我敢肯定它很普遍，因为很多在线页面都有它可以解决。谢谢！

Answer 1

header {
  position: fixed;
  display: flex;
  top: 0px;
  width: 100%;
  height: 90px;
  background: rgba(0, 0, 128, 90%);
  z-index: 2
}

看起来像标头将是粘性标头。如果您需要页眉层位于页面的前面，则必须使用z-index对该层进行排序。

Answer 2

尝试一下！

header {
  position: fixed;
  display: flex;
  top: 0px;
  width: 100%;
  height: 90px;
  background: rgba(0, 0, 128, 90%);
  background-color: white;
  z-index: 999
}

所有Z-index

当我向上滚动时，无法获取导航栏以隐藏内容

2 个答案: