css position属性

position:static absolute relative fixed
元素position默认是static

TRBL属性(top、right、bottom、left)只有当元素设定了position属性才有效。

1.偏移属性

设置了定位属性的元素,同时获得了偏移属性,top right left bottom z-index但对于static的元素不具有这些属性

2.relative

设置relative的元素,无论是否设置偏移属性,都不会脱离标准文档流,只是相对于元素原始的位置发生了改变,元素的原始位置仍然存在,不会被填充。

如果父级元素没有设置position属性,那么定位是相对于浏览器左上角定位、,如果父级元素设置了position属性,那么就会相对于该元素最近的被定位的父级元素的左上角为原始点进行定位。

3.absolute

设置absolute的元素,会脱离标准文档流,元素的原始位置不再存在,会被其他元素填充,与是否设置了偏移属性无关,元素位置通过偏移属性设置。

如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。

如果绝对定位元素只申明position:absolute,那么其自身定位以及margin的参照物即为其最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素的内容框。即没有设置left、top时,left和top的默认值将使元素的位置和“原来的位置”一样。

4.fixed

fixed属性,元素脱离文档流,不随着滚动条滚动而滚动,适合做返回顶部按钮的定位

设置了float属性,元素会脱离标准文档流,其设计是为了实现文字环绕效果,与absolute的区别在于,float的元素在文档流还是占有有一席之位的。即absolute元素不对其他元素造成影响,而float元素会影响到其他元素,所以,二者是不同的文档流。

以上是个人观点,欢迎批评指正,一起学习。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值