如何正确处理网页顶部的固定导航栏

Question

让我再解释一下。

我一直在制作一个网页，顶部有一个导航栏。我决定希望它被修复并始终显示在页面顶部。

当我这样做时，曾经位于导航栏下方的内容顶部现在滑落到它下面，因为该栏不再占用该空间。

有没有适当的方法来解决这个问题？我可以在内容顶部添加填充，这意味着它不会从导航栏下方开始，但这似乎不是最好的解决方案。或者，我可以在导航栏下方制作一个不可见的div，以便占用空间......

有什么想法吗？我会尽快添加屏幕截图。

我正在为导航栏使用"位置：固定"属性。

Answer 1

大多数时候我都是这样做的。主部分的边距与顶栏相同，带减号。

*{
  font-size:20px;
}
topbar{
  position:fixed;
  margin-top:-20px;
	
  display:block;
  background:red;
  width:100%;
}
main{
  margin-top:20px;
	
  background:yellow;
  width:100%;
  padding-right:10px;
}

<topbar>Hey there</topbar>
<main>
  Here is<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
  some<br>
  text<br>
</main>

您可以忽略所有其他样式 - 它们是出于美学原因:)

Answer 2

我在实践中看到的最佳解决方案是将所有内容（包括标题）包装在一个包装器div 中。 保持标题的样式不变

position:fixed; top: 0;

然后将填充设置为包装器div 的顶部，等于标头的高度。