什么时候用相对定位或绝对定位

要理解定位你要先理解文档流,在文档流中相对定位的元素占有位置,而且会影响后面的元素(块元素、行内块元素),比如两个div并排,另外一个会换行。
<div>111</div>
<div>222</div>
而绝对定位就是把该元素从文档流中踢出,不会占用文档流的位置,也不会影响后面的元素。
<div style="position: absolute;">111</div>
<div>222</div>
如上面的实例,111和222会重叠,审查元素你会发现222有实际位置,111没有位置。他是使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位,如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 。

网页布局涉及到各种设备各种分辨率下的兼容,所以就注定绝对定位不能适用于大部分场景。。所以布局只能依赖于上级元素的位置,而不能依赖于设备的高度和宽度。

适合绝对定位的场景主要是一些页面辅助功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值