CSS定位

博客对CSS中position的取值进行简洁易懂的总结。介绍了relative定位是相对于自身位置,设置偏移不影响其他元素,最外层无宽度时为浏览器宽度;absolute定位相对于最近设置绝对或相对定位的父元素,脱离文档流,无宽度时由内容决定。

position的取值主要有如下图:

官方给出的总是不那么容易懂得,所以有了以下简洁易懂的总结:

 relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处于文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

 absolute:定位是相对于离元素最近的设置了绝对定位或相对定位的父元素,如果没有父元素设置了绝对或相对定位,则元素相对于根元素即HTML元素定位。设置了absolute的元素脱离了普通文档流,元素在没有设置宽度的情况下,宽度由里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据该位置。

 

转载于:https://www.cnblogs.com/kbinblog/p/10915379.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值