我正试图在视差图像上添加一个菜单，但当我在CSS中向ul l｛｝添加float:left时，它会使菜单位于视差图像中，而不是视差图像的顶部。需要帮助使菜单位于视差图像的顶部并进行修复，以便在向下滚动时菜单保持在视差图像上方。
这是网站的HTML：
<html>
<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="title">
<img src="images/Logo.png" alt="Croydon Cycles" align="center">
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="#">Location</a></li>
</ul>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1">
<div class="b1">
<a href="shop.html">
<input type="button" class="button" value="view all bikes" >
</a>
</div>
</div>
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="images/profile-1.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="images/profile-2.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular traini.</p>
</div>
</div>
</body>
</html>
这是CSS代码：
* {
margin: 0;
padding: 0;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.title {
text-align: center;
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 400px;
min-height: 400px;
}
.b1{
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 65%;
left: 45%;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
ul {
}
ul li{
list-style: none;
display: inline-block;
float:left;
}
ul li a{
text-decoration: none;
}
尝试使用headerBlock类为标题和ul添加div父级，并添加以下内容：
.headerBlock {
background-color: white;
position: fixed;
width: 100%;
}
像这个例子
* {
margin: 0;
padding: 0;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.title {
text-align: center;
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('http://via.placeholder.com/500x500') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 400px;
min-height: 400px;
}
.b1{
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: absolute;
top: 65%;
left: 45%;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.headerBlock {
background-color: white;
position: fixed;
width: 100%;
}<html>
<head>
<title>Croydon Cycles</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="style.css" rel= "stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="headerBlock">
<div class="title">
<img src="http://via.placeholder.com/50x50" alt="Croydon Cycles" align="center">
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="#">Location</a></li>
</ul>
</div>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1">
<div class="b1">
<a href="shop.html">
<input type="button" class="button" value="view all bikes" >
</a>
</div>
</div>
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="http://via.placeholder.com/400x400" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="http://via.placeholder.com/400x400" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular traini.</p>
</div>
</div>
</body>
</html>