html - 固定导航栏

Question

我目前正在尝试创建网页，并且在尝试在滚动时将固定导航栏设置到网页顶部时遇到了问题。

我可以使用

将导航栏固定到页面

position:fixed; 

但是，我遇到的问题是导航栏下方的内容(主要内容)被推到页面顶部，而不是直接停留在我的固定导航下方。

我试过使用边距来纠正这个问题，但似乎没有用。

提前致谢

Answer 1

当您使用 position:fixed 时，您从文档的实际流中删除了受影响的元素。

最快和最有效的解决方法是将您的内容包装在一个 div 中，并将其从页面顶部移开与您的导航相同的距离...

<div class="fixed">my nav stuff</div>
<div class="my-pushed-content">my content is here</div>

CSS:

.fixed { 
    position:fixed; height: 50px; 
 }
.my-pushed-content {
    position: relative //or absolute depending on your needs
    top: 50px;
}

希望这对您有所帮助!