css中sticky属性有哪些特点

这篇文章主要介绍css中sticky属性有哪些特点，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

黟县网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

说明

1、这个元素并不脱离文档流，仍然保留着元素在文档流中的原始位置。

2、当元素在容器中滚动超过指定偏移值时，元素固定在容器的指定位置。

也就是说，如果你设置了top:50px，当sticky元素到达相对定位元素顶部50px的位置时，固定，不再向上移动。

3、固定元素的相对偏移是相对于最接近它的带滚动框的祖先元素。

如果祖先元素不能滚动，则相对于viewport来计算元素的偏移。

实例

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行
第5行


tab1
tab2
tab3
tab4


第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属性有哪些特点”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！