CSS中sticky属性主要用处是什么，怎么应用-群英

上一篇：CSS元素浮动有哪些规则要注意的，怎么做下一篇：CSS内边框是指什么，如何设置修改

这篇文章将为大家详细讲解有关“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>

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

到此这篇关于“CSS中sticky属性主要用处是什么，怎么应用”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！