固定顶部导航栏覆盖单词？

Question

我正在尝试创建一个固定的导航栏（因此当您向下滚动时它会停留在顶部），但是当我将其设置为固定时它会覆盖页面上的文字。我不确定如何解决这个问题，这样单词（在页面顶部时）就不会被导航栏覆盖，它们只会在滚动时被覆盖（我不确定这是否有意义，我是非常抱歉，如果不是，我对此很陌生。）

这是导航栏的代码：

.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;
}

这是一张图片： Navigation Bar Covering Words

Answer 1

position: fixed 将导航栏放在内容的顶部，因此在 z 轴 (z-index) 上，您的导航栏位于最顶部。因此，不再为下一级（z-index - 1）的导航栏预留 space。您的解决方法是正确的，您需要将页面内容下移。如果您的导航栏为 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>

固定顶部导航栏覆盖单词？

Fixed Top Navigation Bar Covering Words?

html

css