position：sticky粘性布局
作用
- 它是相对定位
position:relative和固定定位position:fixed的混合。在屏幕范围时该元素并不受到定位的影响（left、top等属性），当该元素将要滚动到某一阈值点(例：top:10px;)，根据left、top等属性成固定定位fixed的效果。 - 不再用监听scroll事件，既可实现导航栏滚动绝对定位的效果
生效条件
- 父元素不能
overflow:hidden或者overflow:auto属性 - 必须指定
top、bottom、left、right4个值之一，否则只会处于相对定位 - 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
注意：该元素不脱离文档流，仍然保留元素原本在文档流中的位置
兼容性
- [ ] IE11
- [x] edge
- [x] chrome
- [x] firxfox
- [x] safari
Q: 如何兼容IE11？
A: 使用
position: fixed;,或者使用sticky填充包Q: Safari中无效如何解决？
A: 使用
posititon :-webkit-sticky;
能够解决哪些问题？
-
当元素使用
transform属性时，会限制position:fixed的跟随效果，这时可以使用position:sticky来兼容fixed定位这个影响只出现在chrome和firefox中
网友评论