粘性定位

粘性定位 position:sticky 一个定位的奇葩,

设置position:sticky同时给一个(top,bottom,right,left)之一即可

使用条件:
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

解决办法:
1.在使用组件库的tab时,外层套一个div,防止点击穿透和不正常的事件流走向
或者(一个治标不治本的方法,具体看业务场景)

2.组件库的样式无法改,sticky作为tab组件的行内样式,因为我使用这个tab时是直接在viewpoint的顶部的,这是完全可以用fixed达到效果。我在调用类的外部设置了position:fixed !import;样式最高优先级去覆盖了组件库中的定位样式,就正常了。

兼容:
position:sticky对安卓的兼容并不是太友好,尤其是对安卓系统的兼容,目前手机端的用户非常多,要做到兼顾,由于安卓系统对sticky粘性定位的惨淡支持;如果业务场景可以用其它定位解决,那就还是不要用sticky

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近项目中遇到一个需要置顶导航栏的问题,一顿操作用js写好了之后偶然间发现css居然新增了一条属性可以实现同样的效...
    BoomKing阅读 4,324评论 1 1
  • 对于大多数人来说,对于css的定位属性,大家者基本上都是在和以下四种打交道。 然而今天要介绍的主角则是正在实验阶段...
    _proto_麻瓜一袁阅读 3,532评论 0 0
  • 效果图 position: sticky 设置之后,元素依然处于标准文档流中,但是当元素相对于视窗的位置跨越了你设...
    聪明的汤姆阅读 3,666评论 0 0
  • 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。 在 viewport 视口滚...
    co可丁阅读 8,918评论 1 2
  • 幸福不仅仅是寻找,更是一种创造。不论先来后到,我只知道,不管谁先长大,奇迹般的缘分会让我们相遇,相知……在这个世界...
    浅草夏沫阅读 3,068评论 0 2

友情链接更多精彩内容