美文网首页
粘性定位

粘性定位

作者: leeolady | 来源:发表于2019-03-15 15:41 被阅读0次

    粘性定位 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

    相关文章

      网友评论

          本文标题:粘性定位

          本文链接:https://www.haomeiwen.com/subject/taqzpqtx.html