position:sticity简介

一句话描述position: sticky的作用：让sticky元素在不超出包含块(containing block)的前提下尽可能展示在最近滚动祖先元素(nearest scrollport)的视口内。

图中黑色框是最近滚动元素的可是窗口，绿色是sticky box，浅蓝色为粘性限制矩形，红色为containing-block，而绿色块在什么位置可以sticy是浅蓝色和红色块共同决定的。

怎么判断最近滚动祖先元素？

祖先元素中有overflow属性值不是visible和clip的都是滚动元素，其中包括：scroll,hidden和auto。

auto和scroll值会导致元素变成滚动元素好理解，为啥hidden也会导致元素变成滚动元素？

因为overflow: hidden虽然不能通过鼠标键盘等方式直接滚动元素中的内容，但是可以通过编程的方式来滚动元素的内容，所以overflow: hidden也会导致元素变成滚动元素。

什么是包含块？

有点复杂，简单理解为用于布局和定位的包含元素的矩形。详细参考文档containing block。

细节

在粘性布局中有三个东西参与计算sticky box的位置，分别是粘性限制矩形(sticky view rectangle)，最近祖先滚动视口(nearest scrollport)和包含块(containing block)。

粘性限制矩形

通过sticky box的top，bottom，right，left的属性和最近祖先滚动视口计算得出，用于限制sticky box的位置。

例如：最近的滚动视口高300px，sticky box高200px，top属性是20px，所生成的粘性限制矩形的高度就是280px。但是如果如果最近滚动视口只有100px高度，sticky box的底边自动会算成-120px让粘性限制矩形的高度是200px可以完全包裹住sticky box。

所以粘性限制矩形是针对sticky box而言的，每个sticky box都有自己对应的粘性限制矩形。而该矩形的大小和位置由最近滚动视口和stick box的top，bottom等属性值共同决定的。当最近祖先滚动元素内滚动时粘性限制矩形并不会跟随内容滚动。

如果sticky box的top有值，而bottom为auto，那么该sticky box永远不会被推动向上移动，只会因为top的限制被推动向下移动，auto可以理解为改边对于sticky box的位置没有限定作用。left和right同理。

参考

sticky-view-rectangle

CSS position:sticky解析

overflow-properties