粘性定位

字数 363阅读 309

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

设置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

推荐阅读更多精彩内容