CSS %ignore_a_1%: auto 失效排查：父元素 z-index 的影响
在使用 CSS overflow: auto 创建滚动容器时，有时滚动条会显示但无法滚动。本文分析一个案例，并讲解导致此问题的原因及解决方案。
问题： 容器设置了 overflow: auto，垂直滚动条显示，但无法滚动。容器样式如下：
height: 250px;box-sizing: border-box;border-bottom: 1px solid #000;background-color: #eee;overflow: auto;scroll-snap-type: y mandatory;position: relative;z-index: 99;
问题并非容器样式本身，而是其父元素的 z-index 属性为负值。负 z-index 值会影响层叠顺序，导致滚动失效。即使子元素设置了 overflow: auto，父元素的 z-index 问题也会影响滚动功能。
立即学习“前端免费学习笔记（深入）”；
Weights.gg
多功能的AI在线创作与交流平台
3352 查看详情
解决方案： 检查并调整父元素的 z-index 属性。确保其值为非负数，或设置为大于子元素 z-index 的正整数。
示例代码：
Document .box { height: 150px; box-sizing: border-box; border-bottom: 1px solid #000; background-color: #eee; overflow: auto; scroll-snap-type: y mandatory; position: relative; z-index: 99; }123123123123123123123123123123123123
此示例中，.box 容器的 overflow: auto 属性正常工作。 对比可知，正确设置父元素 z-index 对 overflow: auto 的正常运行至关重要。
以上就是CSS overflow:auto失效了？父元素z-index可能是罪魁祸首！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1122094.html
微信扫一扫 
支付宝扫一扫 
