position:sticky
2020-07-15 本文已影响0人
莣忧草_3b53
杀了个回马枪,还是说说position:sticky吧
1. position:sticky简介
单词sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。基本上,可以看出是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。
2. position:sticky特性
父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。
其实看不太明白 position:sticky看起来并没有什么比较大的缺陷 但是当F12的时候 屏幕过窄 fix的内容左边消失了 所以打算看看 position:sticky是否有什么缺陷 还有一个就是这个属性的兼容性问题 别的都挺鸡肋的 用到了再说吧
position:sticky除了兼容性问题倒是没啥缺陷
来源:https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/