position: sticky 粘性定位

[garinghu]

好久没更文章了，这些天备战期末不说这周一（12.04）还参加了今日头条的面试，不出所料地送走了君哥，我则英勇地挂了，到了现在心态平复了很多，面试嘛，千锤百炼呗

想到这回面试确实有不足的地方，例如人家就问了我关于position的问题，让我说一下position都能设置成什么，我就差了一个粘性定位，感觉是一大败笔

position:sticky

大致的感觉是相对定位(relative)和固定定位(fixed)的结合，乍一看是很美好的

<style>
    *{
        margin: 0;
        padding: 0;
    }
    p{
        width: 100%;
        height: 300px;
    }
    #test{
        width: 100%;
        height: 300px;
        position: sticky;
        top: 10px;
        background: #f00;
    }
</style>

<p>高度为300像素</p>
<div id="test">position: sticky;
        top: 10px;</div>
<p>123</p>
<p>123</p>
<p></p>

兼容性

确实乍一看是很美好的，在一定程度上缓解了监听滚动条的压力，可以有效解决吸顶问题，但据说在Android上会有一定的问题，我没有亲自试，不好下结论，我在这里就说几个一般需要注意的点

1. 不会创建bfc，这点类似relative相对定位

<style>
    *{
        margin: 0;
        padding: 0;
    }
    p{
        width: 100%;
        height: 300px;
    }
    #test{
        width: 100%;
        position: sticky;
        top: 10px;
        background: #f00;
    }
    .left{
        float: left;
        width: 200px;
        height: 200px;
        background: #0f0;
    }
</style>
<p>高度为300像素</p>
<div id="test">
    <div class="left">我浮动了</div>
</div>
<p>123</p>
<p>123</p>
<p></p>

2. 元素最近的祖先元素overflow设置为非默认值visible时，则元素相对于该祖先元素进行sticky定位。若最近的祖先元素设置为overflow:hidden，则元素不会sticky定位
   
   

#ov{
    width: 100%;
    height: 200px;
    background: #ff0;
    overflow: hidden;
}
#test{
    width: 100%;
    height: 100px;
    position: sticky;
    top: 10px;
    background: #f00;
}

<div id="ov">
    <div id="test"></div>
</div>