position: sticky 简介
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor） 和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
深入sticky计算原理
粘性定位中有一个“流盒”（flow box）的概念，指的是粘性定位元素最近的可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，body元素隐含有overflow: auto，此时是body元素。
粘性定位中还有一个名叫“粘性约束矩形”的概念，表示的是粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的left、top、right、bottom属性的偏移计算值后的新矩形的交集。
由于滚动的时候，流盒不变，而粘性定位元素的包含块跟着滚动，因此粘性约束矩形随着滚动的进行是实时变化的。
假设我们的粘性定位元素只设置了top属性值，则粘贴定位元素碰到粘性约束矩形的顶部的时候开始向下移动，直到它完全包含在粘贴约束矩形中。
问题解释
为什么当祖先元素存在overflow不为visible的时候sticky会失效？
我们首先假设该祖先是A，因为body元素本身也是滚动祖先，其高度是无限大，但当前A元素设置了overflow: auto或其他，那么sticky元素会相对A元素定位，但此时由于body元素无限高，A没有具体的height，此时A不会发生滚动。sticky元素相对A，但是A没有发生滚动，body发生了滚动，但没有元素参考它固定，所以最终表现为sticky属性失效。
当sticky元素与父元素高度相同时sticky失效
因为此时包含块高度和粘性定位元素一样，导致粘性约束矩形的高度最大也就是和粘性定位元素一样高，粘性定位元素的已经完全没有了实现粘性效果的空间。
