如何在导航栏上设置“固定位置”而不改变我的页面布局？答案

【问题标题】：How to cause setting 'position fixed' on navbar not to change the layout of my page?如何在导航栏上设置“固定位置”而不改变我的页面布局？
【发布时间】：2020-03-09 12:30:07
【问题描述】：

所以，我在顶部有一个导航栏，在底部有一个页脚，在中间有一个大图像。我使用边距放置所有内容（边距顶部：0 用于导航，边距底部：0 用于页脚和边距：3% 自动用于图像。图像以我的页面为中心，一切都很好。但是，当我设置导航位置时栏固定，图像的边距似乎从页面的开头而不是导航栏的末尾开始计算（它导致我的图像与导航栏重叠而不是在页脚和边距之间）。我知道修复它的唯一方法正在制作第二个不可见的 div，其大小与我的导航栏完全相同，但我认为这不是最实用的方法。

我不知道是否有必要将 HTML/CSS 代码放在那里，我想我已经描述了所有重要的东西。在此先感谢您的帮助

【问题讨论】：

您可以将position: fixed 设置为nav 的第一个孩子。在导航中，您使用padding-bottom 或固定的height 来提供额外的高度。 <nav><div></div></div>
固定元素从正常的文档流中移除，因此您的图像的边距从页面顶部开始
您应该在导航和页脚之间使用容器来存储内容。这个容器应该有一个你的导航高度的边距，然后它应该可以很好地工作。

标签： html css css-position

【解决方案1】：

试试position:sticky。如果你有固定的元素高度，效果最好。

【讨论】：

不知道这样的东西存在，从未在 css 位置教程中看到过。谢谢。

【解决方案2】：

设置position: fixed 会从文档流中删除元素。一种可能的解决方案是为内容添加一个容器，在您的情况下为图像的容器 div，并在容器上为导航栏的高度设置一个固定的上边距或上边距。

【讨论】：