css中sticky属性有哪些特点
这篇文章主要介绍css中sticky属性有哪些特点，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
黟县网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
说明
1、这个元素并不脱离文档流，仍然保留着元素在文档流中的原始位置。
2、当元素在容器中滚动超过指定偏移值时，元素固定在容器的指定位置。
也就是说，如果你设置了top:50px，当sticky元素到达相对定位元素顶部50px的位置时，固定，不再向上移动。
3、固定元素的相对偏移是相对于最接近它的带滚动框的祖先元素。
如果祖先元素不能滚动，则相对于viewport来计算元素的偏移。
实例
demo
html,body{
margin: 0;
padding: 0;
}
.fixed{
line-height: 40px;
display: flex;
position: -webkit-sticky;
position: sticky;/*兼容*/
top: 0;
left: 0;
}
.fixed li{
flex: 1;
text-align: center;
background-color: #61b0ef;
}
ul{
padding: 0;
}
li{
list-style: none;
}
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
- 第1行
- 第2行
- 第3行
- 第4行
以上是“css中sticky属性有哪些特点”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
标题名称：css中sticky属性有哪些特点
分享路径：
http://csdahua.cn/article/ipjdii.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
