问题背景：
在 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 定位为何作用在祖先元素上而非父元素上？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
321
收藏
