Я создаю целевую страницу и мне интересно, почему я не могу заставить мою навигационную панель работать должным образом.Я правильно отформатировал, но одна проблема, с которой я сталкиваюсь, заключается в том, что когда я прокручиваю текст, он проходит через панель навигации / заголовок, когда он должен идти позади него или не виден при прокрутке вниз.Кто-нибудь знает, как я могу решить эту проблему?Вот код, который у меня есть:
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>
© 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;
}
Любые ваши мысли приветствуются.Я уверен, что это довольно распространенная вещь, чтобы исправить, так как на многих страницах в Интернете это есть.Спасибо!