css中sticky属性有哪些特点

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

说明

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

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

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

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

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

实例

<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ul>
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
</ul>
</body>
</html>

以上是“css中sticky属性有哪些特点”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！

css中sticky属性有哪些特点

相关推荐