为什么没用过粘性定位？

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

那么粘性定位是啥？

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的地方。确实和上面总结的第一点所描述的那样。

css 复制代码

    * {
      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)
    }

html 复制代码

  <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>

那么，你有没有产生一个疑问？

当它快要划出屏幕的时候表现为fixed，但我们知道fixed是会脱离文档流的，而上图设置了sticky的盒子定位在top:0的时候，紧随其后的蓝色盒子son4并没有占据它的位置，上升到son3后面，为了让大家看清楚些，我把top的值设置为110px再来瞅瞅。

可以看到置了sticky的盒子滑动到距离可视区域顶部110px（即一个盒子和下外边距的距离）的时候，后面的蓝色普通盒子son4并没有占据sticky盒子的位置。因此得出个结论：

设置了sticky的盒子不会脱离文档流，即便其表现为fixed，它和fixed是有区别的！！！

关于翻译总结的第二点：我们试试将设置top改为设置bottom试试。

可以看到，从最后往上滑的时候，sticky快要滑出屏幕的时候，也是粘在了可视区域bottom为0的地方。同理left和right就不演示了。

要注意的是，top、bottom、left、right 必须至少设置其中一个值。

关于第三点，将父盒子的overflow的值每个都设置一遍看看效果。

overflow: visible

设置overflow: visible，无法滑动。

overflow: scroll

设置overflow: scroll，可以滑动，stick盒子表现正常

overflow: hidden

设置overflow: hidden，无法滑动，并且stick盒子没有出现

overflow: auto

设置overflow: auto，可以滑动，stick盒子表现正常

overflow: inherit

这个值得具体看继承父元素的overflow值

额......不是说明总结的第三点有问题？设置overflow: visible，并没有达到想要那种效果呀！

？？？？？？目前看只有scroll以及auto，即要出现滚动条的情况下才是正常的表现。

因此，我将第三条总结修改一下。

要出现粘滞效果，最近滚动祖先要出现滚动条，overflow: visible 以及 overflow: hidden 都没有出现滚动条，因此没有出现粘滞效果。

如果我的理解有错，希望大佬们指正一下。

粘性定位：只有我没用过吗？