css定位 position:sticky

  • css定位 position:sticky已关闭评论
  • 10 次浏览
  • A+
所属分类:Web前端
摘要

今天在做css定位的时候遇到一个问题,我想用fixed定位下来,但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百,这个就很尴尬了,也不能固定宽度吧,毕竟还要宽度自适应。
这个时候发现了一个position的属性 —– sticky
它是relative和fixed的结合体可以理解为,当我们屏幕还没有滚动出原有的范围的时候就跟relative一样,正常排列在那里,当我们屏幕滚动出去了这个时候就fixed,常用语头部或者底部一个吸顶的行为,最最关键的是,他不会像fixed一样把他的父级变成浏览器可视区域,还是你的父级

今天在做css定位的时候遇到一个问题,我想用fixed定位下来,但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百,这个就很尴尬了,也不能固定宽度吧,毕竟还要宽度自适应。
这个时候发现了一个position的属性 ----- sticky
它是relative和fixed的结合体可以理解为,当我们屏幕还没有滚动出原有的范围的时候就跟relative一样,正常排列在那里,当我们屏幕滚动出去了这个时候就fixed,常用语头部或者底部一个吸顶的行为,最最关键的是,他不会像fixed一样把他的父级变成浏览器可视区域,还是你的父级
css定位 position:sticky