我试图创建一个固定的导航栏(所以当你向下滚动它停留在顶部)，但是当我将它设置为固定它然后覆盖页面上的单词。我不知道如何解决这个问题，以便单词(当在页面顶部)不被导航栏覆盖，它们只在滚动时被覆盖(我不确定这是否有意义，我很抱歉，如果它没有，我是很新的。)
下面是导航栏的代码:.topnav {
background-color: #333333;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 10px;
position: fixed;
width: 100%;
z-index: 1;
left: 0;
top: 0;
}
我试着写这段代码并添加了margin-top，但它仍然被覆盖在页面的顶部:
.maintxt {
margin: auto;
margin-left: 250px;
margin-right: 250px;
margin-top: 50px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
这是一个图像:包含单词的导航栏
position: fixed将导航条置于内容的顶部，因此在z轴(z-index)上，您的导航条位于最顶部。由于这个原因，没有更多的空间被保留在导航栏下面的水平(z-index- 1)。你的解决方案是正确的，你需要移动你的页面的内容向下。如果你的导航栏是50像素高，你的页面内容必须向下移动至少(!)50像素。
遗憾的是你没有发布完整的代码，所以我只能给你一个一般的例子:
html, body {
margin: 0;
padding: 0;
}
#navbar {
background: red;
height: 50px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#content {
margin-top: 50px;
}<div id="navbar"></div>
<div id="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>