css中sticky属性有哪些特点-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

css中sticky属性有哪些特点

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

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

说明

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

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

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

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

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

实例




demo

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


本文题目:css中sticky属性有哪些特点
网站网址:http://kswsj.cn/article/ipjdii.html

其他资讯