请大佬帮忙解析一段 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 定位的元素设置正确的滚动祖先元素？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630376.html
微信扫一扫 
支付宝扫一扫 
