关于对CSS position:absolute 和relative的理解

    写此博客以便记忆position的absolute和relative属性:

    relative是相对于元素自身进行定位,并未脱离文档流,所以原来的位置还是会空着,不能被其他元素所占据。

    而absolute则是脱离文档流,如果父元素position没有static以外的属性(其他属性absolute、relative、fixed属性),那么根据absolute的top、left、bottom、right则是根据html页面来定位的。如果父元素有absolute、relative、fixed属性,那么会根据父元素左上角的点来定位。

    虽然absolute脱离了文档流,如果没有设置top、left、bottom、right属性,那么默认还是会根据前面的元素来进行定位,不会覆盖之前的元素;但是由于脱离了文档流,后面的元素会占据其原来的位置,如果后面的元素position属性是static,那么前面absolute的元素会在后面元素的上面;如果后面元素的position不是static(其他属性absolute、relative、fixed属性),那么后面元素就会覆盖前面的元素。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值