求解 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 顶部？的详细内容，更多请关注php中文网其它相关文章！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
901
收藏
