admin管理员组文章数量:1610836
首先,我们先来了解一下属性position当属性值取fixed时的作用:使对象脱离常规流,使用top,right,bottom,left等属性 以窗口为参考点 进行定位,当出现滚动条时,对象不会随着滚动。**
接下来我们看下面这个关于div的css:
div{
position: fixed;
left: 50%;
top:50%;
width: 100px;
height: 100px;
background-color: #f00;
}
根据对fexid的介绍,我们可以知道left:50%;和top:50%;是使div相对于页面的宽高,以左有页面宽50%的距离,以上有页面高50%的距离。
此时让我们来看看显示效果:
根据显示很容易看出,div并没有达到居中的目的。此时说明fixed中使用top,right,bottom,left等属性时它作用的对象定位的是div板块的左顶点,而不是整个div。此时,我们要让div居中,可以转化为让div版块的中心点居中,以达到div居中的效果。因此可以直接让divx向左向上移动div板块宽高的一半:(margin-left:-50px;margin-top:-50px;)
div{
position: fixed;
left: 50%;
top:50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top:-50px;
background-color: #f00;
}
此时就达到居中的效果了:
此时如果再加上许多的换行符,当滚动条的滚动时,这个红色的小方框会一直在页面的中间,不随滚动条滚动而消失。
版权声明:本文标题:利用属性position的属性值fixed使div在页面居中(详解) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728606178a1165485.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论