Sticky 定位为何作用在祖先元素上而非父元素上？

解析 Sticky 定位 CSS 代码的奥秘

问题背景：

在 HTML 代码中，使用了 sticky 定位属性，希望将 .sticky-box 元素始终固定在屏幕顶部。但是，实际滚动条是在 .app-container 标签内。根据常规理解，sticky 定位应该只对 .app-container 标签的直系子元素生效，包括 .info 和 .main。然而，CSS 代码中，.sticky-box 却可以实现 sticky 定位。

问题答疑：

造成这一现象的原因在于 sticky 定位的生效规则。sticky 定位并不是相对其父元素，而是相对其最近的有滚动机制的祖先元素。

在给出的 HTML 代码中，虽然 .app-container 标签设置了 overflow: auto，但它并非最近的有滚动机制的祖先元素。实际上，.box-wrapper 标签才是最近的有滚动机制的祖先元素。

因此，.sticky-box 的 sticky 定位生效在 .box-wrapper 标签上，而不是 .app-container 标签上。这就解释了为什么 .sticky-box 可以始终固定在屏幕顶部，即使滚动条是在 .app-container 标签内。

以上就是Sticky 定位为何作用在祖先元素上而非父元素上？的详细内容，更多请关注其它相关文章！