html - 向上滚动时无法让导航栏隐藏内容

问题描述

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

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;

}

感谢您的任何想法。我敢肯定，由于很多在线页面都有它，因此修复它很常见。谢谢！

标签： htmlcssimage

html - 向上滚动时无法让导航栏隐藏内容

问题描述

解决方案

推荐阅读