1.属性介绍：
sticky定位（粘性定位），指的是基于用户的滚动位置来定位，默认情况下它表现就和relative定位一样，但是当页面滚动区域大于你的目标区域（即sticky对应的元素区域）时，它的表现和fixed定位一样。
元素定位也同样需要根据所设定的top,left,right,bottom来呈现。
2.sticky定位的缺点：
存在兼容性问题
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要添加-webkit前缀。
3.案例：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>sticky</title><style>.userList-title{padding: 10px;background-color: greenyellow;position: -webkit-sticky;position: sticky;top:0;}.user-list-item{padding: 10px;background: pink;}.user-list-item:nth-child(odd){background-color: coral;}.phone{margin-top: 10px;}</style></head><body><divclass="userList-title">用户列表</div><divclass="user-list-item"><divclass="username">张三</div><divclass="phone">18989898989</div></div>
.....此处省略n个列表项
<divclass="user-list-item"><divclass="username">张三</div><divclass="phone">18989898989</div></div></body></html>
本文转载自: https://blog.csdn.net/Kratial/article/details/127212761
版权归原作者 Kratial 所有， 如有侵权，请联系我们删除。
版权归原作者 Kratial 所有， 如有侵权，请联系我们删除。