position:sticky 给你点个赞

what?

可以看做是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。
较适用于导航的跟随定位效果。(当然还有很多其他的牛逼的效果)

use?

position: -webkit-sticky;
position: sticky;
top: 0;(非必须)
left: 0;(非必须)

attention?

1.父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。
2.同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,则会挤开原来的元素,形成依次占位的效果。
3.sticky定位,不仅可以设置top,基于滚动容器上边缘定位;还可以设置bottom,也就是相对底部粘滞。如果是水平滚动,也可以设置left和right值。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,703评论 1 92
  • float float 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流...
    Promise_4483阅读 2,795评论 0 0
  • 大家好,我是IT修真院深圳分院第06期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    不二先森zZ阅读 9,862评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,435评论 1 45
  • 我最喜欢的体育活动是放风筝,放风筝是一项有趣又好玩的活动,放风筝分好几种玩法,一、放高飞远,二、比赛,三、...
    杨涛旭阅读 1,099评论 0 0

友情链接更多精彩内容