问答

css粘性定位的问题

作者:admin 2021-05-07 我要评论

如图红黄绿三个box是同一行内的三个col,我给红框和绿框都设置了position: sticky;但是只有红色框是起效的,绿色框还是会随着滚动条滚动,并不会固定在顶部,请...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png
如图红黄绿三个box是同一行内的三个col,我给红框和绿框都设置了position: sticky;但是只有红色框是起效的,绿色框还是会随着滚动条滚动,并不会固定在顶部,请问这是什么原因呢?
image.png
这是对应的红框绿框布局代码

###
  1. 父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。
  2. 父级元素设置和粘性定位元素等高的固定的height高度值,或者高度计算值和粘性定位元素高度一样,也没有粘滞效果。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • css粘性定位的问题

    css粘性定位的问题

  • 【移动端】h5页面要求兼容各种机型一屏

    【移动端】h5页面要求兼容各种机型一屏

  • react+typescript实现可以在页面随意拖

    react+typescript实现可以在页面随意拖

  • hadoop2.10执行自带的测试程序不输出ou

    hadoop2.10执行自带的测试程序不输出ou

腾讯云代理商
海外云服务器