如何为 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 定位的元素设置正确的滚动祖先元素？的详细内容，更多请关注抖狐科技其它相关文章！