为什么没用过粘性定位？

没有遇到相关需要使用粘性定位的需求。
可能遇到了，但是不需要粘性定位也能搞定。

那么粘性定位是啥？

position属性的可取值一共有5个，分别是static、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）以及sticky（粘性定位）。

前面几个就不说了，唯独这个sticky，不知道有没有和我一样都基本没用过的。

**官方描述：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）

额，基本没看懂......

翻译一下，可以总结为三个点。

设置了position:sticky的元素，元素在屏幕内，其表现为relative，要滚出显示器屏幕的时候，其表现为fixed。

可以设置top、left、right、bottom进行定位。
~~> 3. 父级元素不能有任何overflow:visible以外的overflow设置。~~

最近祖先素要不能出现影响滚动条的设置。

关于第一点，下面上示例看看。

可以看到设置了sticky的盒子在没滑动出屏幕之前就是排列在其中，没有脱离文档流。
快要滑动出屏幕的时候的表现就和设置fixed一样，定位在了top为0的地方。确实和上面总结的第一点所描述的那样。

    * {
      margin: 0;
      padding: 0;
    }
    .father {
      background: pink;
      width: 375px;
      max-height: 330px;
      overflow: scroll;
    }
    .son {
      background: skyblue;
      width: 100px;
      height: 100px;
      margin: 0 auto 10px;
    }
    .sticky{
      position: sticky;
    }
    .top {
      top: 0px;
    }
    .bgB {
      background: rgb(244, 164, 96, 0.5)
    }

  <div class="father">
    <div class="son">
      普通的son1
    </div>
    <div class="son">
      普通的son2
    </div>
    <div class="son">
      普通的son3
    </div>
    <div class="son bgB sticky top ">
      设置了sticky的son，top:0px
    </div>
    <div class="son">
      普通的son4
    </div>
    <div class="son">
      普通的son5
    </div>
    <div class="son">
      普通的son6
    </div>
  </div>