position:sticky 粘性布局方案

先放效果图镇楼：（其实主要效果在于左上角的字母条在滑动过程中黏性覆盖固定）

通讯录.gif

当前系统支持效果：iOS（当然Android下就各安天命了，毕竟这个效果是因为iOS的通讯录才引发的血案）

代码实现，主要是字母条（也就是每一区域联系人的头部块）需要的样式：

list-head {
    position: relative;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

一开始可能会遇到的问题：

（1 一开始设置了样式，但是在手机上并没有此效果，推断是position的覆盖，就是relative和sticky的顺序，应该将sticky放在relative的后面。

（2 测试的时候还发现在滑动的过程中列表的个别样式丢失和跳动，或者说是在脱离文档流自由飞翔了，猜测是布局没有用position:releate;将列表项圈起来，于是在后面每一个列表项增加一个position:releate;。

（3 还发现往上滑动列表的时候，只有第一个列表项在经过字母条的时候覆盖到它的上面，然后到了第二个列表项往上滑动的时候，就被字母条覆盖回去在下面了，猜测是z-index搞的鬼，于是在list-head增加最后一个样式: z-index:1;