解决position: fixed下如何使用margin

先看效果 

查看效果

要解决的问题:1、position: fixed遮挡首行内容。2、margin:0 auto无法居中

注意:这里的title是居中的

 

 问题描述:

在使用position: fixed布局的时候,我们发现,title是铺满状态的,也就是width是100%的状态,当我们想让他居中紧凑的显示的时候,我们通常会使用margin:0 auto;但是我们发现,会出现这样的问题:

 

大家可以看到,它并没有居中显示,而是跑到了最左边,这个问题很好解决添加以下属性

left:0px;right:0px;

解决首行内容被遮挡的问题:

由于position: fixed会使title脱离文档流,大多数人会给首行内容添加margin-top。但是往往效果差强人意,建议大家使用padding-top,除此之外,你也可以试试新的定位:position: sticky;top:0;也能达到你想要的效果哦

猜你喜欢

转载自blog.csdn.net/weixin_42886104/article/details/89489043