我在 freecodecamp 课程上开始了我的最后一个项目，该课程正在构建一个投资组合，但是当我设置要修复的 navbar 时我卡住了它按常规顺序穿鞋。
我想要的是有一个固定的 navbar 部分，现在有一个背景图像和一个标题。
这是我的代码：
* {
margin: 0;
padding: 0;
}
#navbar {
/*if you set remove the mav bar fixed the content gets all weird position: fixed; */
top: 0;
width: 100%;
background-color: #BE3144;
height: 100px;
}
.container {
display: flex;
justify-content: end;
flex-direction: row;
}
#navbar ul {
list-style: none;
margin-top: 20px;
;
}
#navbar li a {
text-decoration: none;
font-size: xx-large;
margin-right: 35px;
color: #F0F0F0;
}
#navbar li:hover {
background-color: grey;
}
#welcome-section {
background: url(https://img.freepik.com/free-photo/gray-painted-background_53876-94041.jpg?w=2000);
background-color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav id="navbar">
<ul class="container">
<li><a class="nav-link" href="">about</a></li>
<li><a class="nav-link" href="">work</a></li>
<li><a class="nav-link" href="">contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1>i am mohamed <br>a web developer</h1>
</section>
</body>
</html>回答1
您可能正在寻找 css 标签 position: fixed
此外，您不应该使用 <ul> 和 <li> 因为它已被弃用
在您创建问题之前，请查看我们数以万计的现成答案，https://stackoverflow.com/questions/7576342/css-to-keep-element-at-fixed-position-on-screen！