400-800-9385
网站建设资讯详细

前端制作之css position居中

发表日期:2019-02-09 00:00:01   作者来源:方维网络   浏览:2800   标签:    
在现在大分部网站中都会使用定位(position)把一个div盒子(a)移至我们想放置的位置上,而往往这个我们想放置的位置是div盒子(a)在父级盒子(b)中上下左右居中显示,我们会用到position两种属性值absolute(绝对定位)和relative(相对定位)。
absolute(绝对定位):元素会脱离原来的文档流,使用left,right,top,bottom等属性设置的值相对于定位设置(relative(相对定位))的父级对象进行绝对定位,如果父级没有进行定位属性设置,就会一层一层往上直到有定位的祖辈级元素为止,同时绝对定位的对象可层叠。
relative(相对定位):元素不会脱离原来的文档流,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠。
设置b盒子为relative(相对定位),a盒子为absolute(绝对定位),a盒子的宽高固定,top、left、right、bottom的值为0,margin:auto;代码如下图:

前端制作

如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/4899.html