主页/ 电商学院/网站开发/前端制作之css position居中

前端制作之css position居中

归类:网站开发
在现在大分部网站中都会使用定位(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;代码如下图:

前端制作

0 喜欢
395 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交