在线客服

处理网站相关问题，我们时刻待命！

使设置了position:fixed的元素不覆盖下方元素的方法

最近更新：2021-09-25 【打印】

这个问题在网页设计中是非常常见的，就拿马氪软件的这个网站来讲，我们设想还是把网站的头部栏目浮动展示，这样更便于用户查看。

那简单，将头部header设置了position:fixed定位就好啦。

但是，问题也就随之而来，下方的div元素被覆盖，无法看到，极大影响了用户体验。

咋办？

方法一

参考一下咱们的代码

#header{position: fixed;background-color: #fff;width: 100%;top:0; left:0;}

.topsbv-y{margin-top: 120px;}

方法就是在设置了position: fixed和被覆盖的div之间，我们再加入一个div，来制衡一下！例如，像我们设置的占据高度120px。

方法二

header设置了position:fixed定位后，会发现下一个div会自动上移了。

可以给header部分设置高，然后下个div设置一个margin-top,先把两个div分开。

另外要注意设置position:fixed的部分，一定要设置top:0； left:0; 不然会引起margin-top失效！

————————————————

好了，以上就是无锡马氪软件对于“使设置了position:fixed的元素不覆盖下方元素的方法”这个问题的解释，希望方法能够对大家能有所帮助。