web前端面试题附答案021-关于定位position:sticky用过吗？

        后续陆续推出大学生解惑系列文章，欢迎把疑惑发给我

最近发现position的其他几个属性值都不怎么问了，因为问了太久了，大家掌握的也都差不多了，但随着新特性的出现，定位小分队又出现了sticky这个属性值，所以很多时候会顺便问一下。一来是看你是否用过，二来看你用了以后是否总结了一下，三来看你之前的项目浏览器支持的情况，用户的群体，这都是考察点。

1、sticky是做什么用的？

        position属性小分队新出了sticky属性值，其实很多时候很多同学都烦恼，请别出新东西了，我学不动了。烦恼肯定是有的，如果前端一直只有那么一点东西，一两点大多数都学会了，学完了，也就没法往下卷了。而新出的sticky呢，就是需要大家学习的冰山一角。不过好在他并非难点，一旦你用过，基本再去网上查一查，就学的差不都了。但面试这件事和平时学习，项目中使用还是两回事。面试更希望是你的经验加总结的结合体。而sticky呢，设置了以后也更像是relative和fixed的结合体，relative是相对定位，其内部设置了absolute以后，绝对的定位也会根据父元素的relative进行定位，而fixed呢，已经超出文档流了，可以根据top left等值设定他超脱出文档流后的定位。而sticky设定以后呢，既是一个不超脱的定位，又可以做为一个超脱的定位。这是根据被设定的元素当前位置决定的，比如下面这个元素，再加上top:0;的设定，当这个元素的top值大于0的时候就是position:relative的特性，但当用户不断下滑，内容向上走，当这个元素的top值小于等于0的时候，就是有了fixed的特性，就固定在了顶部，脱离了文档流

<div style="position:sticky;top:0;">
    <button>底部按钮</button>
</div>

2、是要问基本用法吗？

        大家要注意，如果问的问题是一个比较常用的东西，那么面试官肯定要问平时遇到的问题，或者使用中感觉这个技术点有什么缺点，或者有什么注意事项

        需要注意的是，使用了position:sticky后，元素的z-index设定将会无效，他就是要浮动再上面；而且兼容性也不是特别好，在iphone6 6s 7 的safari浏览器上，都是无效的，哪怕设定了position:-webkit-sticky，这2个点记住了，可以做为回答项

3、怎么兼容？

        我想如果想要兼容，还是老老实实的用之前的方法吧，监测浏览器的scroll事件，拿到元素的scrollTop值，如果小于等于0的时候，给元素将position的属性值改为fixed。虽然费事点，但可保证兼容性。