position sticky 失效 – 有点另类的写法

一开始在sass这样写的,gulp给我过滤掉了-webkit-sticky… 然后Chromre有效,但Safari失效。

.sticky{
top:0;
position: -webkit-sticky;
position: sticky;

}

直接用position: -webkit-sticky; Safari好了,但Chrome失效了…

网上找了下,解决方法竟然是将前辍写法写最后(如下),所以说有点另类哇.

.sticky{
top:0;
position: sticky;
position: -webkit-sticky;
}

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