您现在的位置是：课程教程文章
css中sticky属性有什么特点
2023-12-14 20:11课程教程文章 人已围观
2021最新web前端开发之html+css3+javascript【知
2021最新web前端开发之html+css3+javascript【知学习过程如有任何疑问或想要获取更多资料 请加QQ群：579884135，务必备注【腾讯...-
69AE基础入门课——层属性中
69AE基础入门课——层属性中Adobe After Effects是Adobe公司推出的一款图形视频处理软件。 素材栏及视图窗口解... -
Vue3开发教程 3. 计算属性和数据监听
Vue3开发教程 3. 计算属性和数据监听本节课介绍计算属性、数据监听，以及Vue的响应式系统的基本原理。 3.1 计算属... -
边框圆角丨WEB前端基础丨CSS3入门基础丨
边框圆角丨WEB前端基础丨CSS3入门基础丨关注微信公众号平台：“CGWANG实训中心” 全球的CG爱好者都在这里，行业新闻齐...
说明
1、这个元素并不脱离文档流，仍然保留着元素在文档流中的原始位置。
2、当元素在容器中滚动超过指定偏移值时，元素固定在容器的指定位置。
也就是说，如果你设置了top:50px，当sticky元素到达相对定位元素顶部50px的位置时，固定，不再向上移动。
3、固定元素的相对偏移是相对于最接近它的带滚动框的祖先元素。
如果祖先元素不能滚动，则相对于viewport来计算元素的偏移。
实例
<!DOCTYPEhtml>
<html>
<head>
<title>demo</title>
<styletype="text/css">
html,body{
margin:0;
padding:0;
}
.fixed{
line-height:40px;
display:flex;
position:-webkit-sticky;
position:sticky;/*兼容*/
top:0;
left:0;
}
.fixedli{
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学习指路：css教程
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
课程教程：css中sticky属性有什么特点上一篇：python传递实参的方法
下一篇：没有了
