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

Question

让我再解释一下。

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

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

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

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

我正在为导航栏使用“position: fixed”属性。

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>

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