CSS overflow: 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 问题也会影响滚动功能。
立即学习“前端免费学习笔记（深入）”；
解决方案： 检查并调整父元素的 z-index 属性。确保其值为非负数，或设置为大于子元素 z-index 的正整数。
示例代码：
Document 123123123123123123123123123123123123
此示例中，.box 容器的 overflow: auto 属性正常工作。 对比可知，正确设置父元素 z-index 对 overflow: auto 的正常运行至关重要。
