如何使导航栏上的设置'position fixed'不更改页面的布局?



所以,我在顶部有一个导航栏,在底部有一个页脚,在中心有一个大图像。我使用边距放置了所有内容(margin-top:0表示导航,margin-bottom:0表示页脚,margin:3%auto表示图像。图像位于页面中心,一切正常。但是,当我将导航栏的位置设置为固定时,图像的边距似乎从页面开始计算,而不是从导航栏结束计算(这会导致我的图像与导航栏重叠,而不是位于页脚和边距之间(。我知道的唯一解决方法是制作第二个不可见的div,其大小与我的导航栏完全相同,但我相信这不是最实用的方法。

我不知道放HTML/CSS代码是否有必要,我想我描述了所有重要的东西。提前感谢的帮助

尝试position:sticky。如果元素的高度固定,效果最好。

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

最新更新