如何为 CSS sticky 定位的元素设置正确的滚动祖先元素？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何为 CSS sticky 定位的元素设置正确的滚动祖先元素？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

请大佬帮忙解析一段 css sticky 定位代码

问题：

在给定代码中，如何在 .app-container 标签内部为 .sticky-box 元素应用 sticky 定位？按照道理，sticky 定位应该仅对 .app-container 的直系子代元素生效，如 .info 和 .main。然而，代码中的执行方式却与预期不同，使得 .sticky-box 实现了 sticky 定位。

答案：

sticky 定位并不是像直觉中那样仅对直接父元素的滚动机制生效，而是会作用于它最近的有滚动机制的祖先元素。

在给定代码中，虽然 .sticky-box 的直接父元素 .side-navbar 没有滚动机制，但是它的祖先元素 .app-container 有滚动机制。因此，.sticky-box 的 sticky 定位生效的是 .app-container 而不是 .side-navbar。

因此，为了让 .sticky-box 在 .app-container 内部实现 sticky 定位，代码中需要如下设置：

• 为 .app-container 添加滚动机制（如 overflow: auto;）
• 为 .sticky-box 应用 position: sticky; 定位属性

理论要掌握，实操不能落！以上关于《如何为 CSS sticky 定位的元素设置正确的滚动祖先元素？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！