解决粘性定位的一些问题

下面是一个正常工作的粘性定位的例子，当你滚动页面，sticky part1 和 sticky part2 会固定在页面顶部。

但是带有背景的边框告诉我们，这东西溢出了。尝试隐藏这些溢出，去下个页面看看效果。

粘性定位失效了！相关元素并没有固定在页面顶部。

当然，如果处理溢出时，overflow 属性的值设置为 scroll 或者 auto，你再去滚动内部元素时会发现：相关元素粘在了它们的祖先元素 <div class="container overflow"> 上。

对此现象，MDN 这么解释：

a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.

总之：
⭐ 使用 sticky 定位属性时，小心 overflow