浅谈CSS中的position属性

背景:可以说前端面试中,css的高频提问题目之一啦,这里做个记录,相关要点有加粗显示~

position有什么属性,有什么区别

  1. static,静态属性,默认定位方式,元素按照正常流分布,不受left,right,top,bottom影响。

  2. relative,相对定位,相对于自身定位,定位前的位置仍然占据定位后的元素不会影响后面元素的布局。可以有left,right,top,bottom去做。

  3. absolute,绝对定位,相对于最近一级的非static父级元素去定位或者文档的根元素(没有的话,一般<body>),定位后的元素占据位置,会影响后面元素的布局。可以有left,right,top,bottom去做。

  4. fix,固定定位,相对于浏览器页面定位,即使页面滚动,元素的位置也不会改变。可以有left,right,top,bottom去做。

  5. sticky,粘性定位,元素在跨越特定阈值前为相对定位,之后为固定定位。可以有left,right,top,bottom去做。特定阈值是指元素到达离视口顶部(或底部)一定距离时触发切换为固定定位。这个距离可以通过设置top、bottom等属性来指定。

关于z-index属性,决定了元素在堆叠上下文中的层级关系,越高越在上面,除了static外,其他四个都可以用。

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值