固定导航栏

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

希望这有帮助！