position常见的几种属性

1、static:默认值,在没有设置position属性的时候,position默认为static 在文档(页面)中占位置。
2、relative:相对定位。在使用top或者left进行位置移动的时候,参考的位置是自己原先(没有定位时)所在的位置。 在文档(页面)中占位置。
3、absolute:绝对定位。在没有父元素(直接书写在body下面),或者有父元素,但是父元素没有设置position的值,就是没有定位时(static属性称无定位)在进行top或者left等偏移位置时,参考的偏移位置为浏览器,就是页面的左上角为top = 0,left =0 的位置。在网上为top负值。再往左为left负值。在使用偏移量的时候,相反,right = 0 ,bottom = 0时为页面可视窗口的右下角。但是当top偏移过后,距离可视页面底部的值,大于bottom偏移量的值得时候,bottom的偏移量是无效的。其他等同。在文档中不占位置。
4、fixed:固定定位。固定在当前可视窗口,不管页面怎么上下,左右滑动,固定在窗口,都不会进行移动。 脱离文档流,当与其他位置的元素发生重叠是,一直在其他元素上方。
5、sticky:粘性定位,即当元素在页面中,网页向上滑动,页面顶部与元素刚开始 想重叠是,就可以设置吸顶效果,随后就像固定定位一定定位在页面顶部。为c3新增加的属性。兼容性不好
6、z-index 该属性是在两个元素都有定位,而且位置发生了重叠,在不设置z-index的情况下,是后来者居上,在设置z-index的时候,那个值大那个在前面。z-index,赋值没有单位,直接赋值即可。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值