使用 CSS sticky 定位时，为什么元素会固定在 app-container 而不是 main 或 side-navbar 顶部？

求解 css sticky 定位代码的奥秘

你提供了一段 CSS 代码，其中使用了 sticky 定位，并困惑于为什么你的 Part3 元素会出现这种效果。

根据你给出的代码，Part3 元素嵌套在 side-navbar 中，而 side-navbar 是 main 的子元素，main 又包含在 app-container 中。app-container 设置了滚动条。

根据 CSS 规范，sticky 定位相对于它最近的有滚动机制的祖先元素起作用。在这个例子中，app-container 是 Part3 元素最近的有滚动机制的祖先元素，因此 sticky 定位相对于 app-container 生效。

也就是说，当页面滚动时，Part3 元素将被固定在 app-container 的顶部，即使它位于 main 元素的内部。

因此，代码中 sticky 定位的正确生效是因为 Part3 元素的最近滚动机制祖先元素是 app-container，而不是它的直系父元素 main 或 side-navbar。

以上就是使用 CSS sticky 定位时，为什么元素会固定在 app-container 而不是 main 或 side-navbar 顶部？的详细内容，更多请关注其它相关文章！