当容器设置了 overflow-y: scroll 却无法滚动时，很可能是其 z-index: -1 导致元素被置于其他层之下，从而无法响应鼠标滚轮或拖拽事件。
当容器设置了 `overflow-y: scroll` 却无法滚动时，很可能是其 `z-index: -1` 导致元素被置于其他层之下，从而无法响应鼠标滚轮或拖拽事件。
在 CSS 布局中，z-index 不仅影响视觉层叠顺序，更关键的是——它直接影响用户交互的可点击/可滚动区域。即使一个元素拥有滚动条、内容溢出且 overflow-y: scroll 已生效，只要其 z-index 为负值（如 -1），且父容器或同级元素存在非负 z-index 或默认堆叠上下文（stacking context），该元素就可能被“压在底层”，失去对鼠标滚轮、触摸滑动及拖拽滚动条等事件的捕获能力。
问题复现与核心原因
你提供的 .exampleDiv 样式中存在如下关键配置：
.exampleDiv {
position: relative; /* 创建了新的堆叠上下文 */
z-index: -1; /* ⚠️ 根本症结：负 z-index 将其置于根层之下 */
overflow-y: scroll;
}由于 z-index: -1，该元素被渲染在 或
的背景层之下（即 stacking level✅ 正确解决方案（推荐两种）
方案一：移除负 z-index（最安全）
将 z-index 设为 0 或省略（默认为 auto，在无堆叠上下文时等效于 0）：
立即学习“前端免费学习笔记（深入）”；
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border: 1px solid gray;
text-align: center;
position: relative; /* ✅ 保留 relative，无需改 absolute */
z-index: 0; /* ✅ 关键修复：提升至默认堆叠层 */
overflow-y: scroll;
scroll-behavior: smooth;
}方案二：避免创建不必要的堆叠上下文（进阶优化）
若无需定位控制，可直接移除 position: relative 和 z-index：
.exampleDiv {
/* ...其他样式保持不变... */
/* position 和 z-index 完全删除 */
overflow-y: scroll;
scroll-behavior: smooth;
}此时元素遵循文档流自然堆叠，滚动交互完全正常。
? 注意：position: absolute 并非必要解法。虽然将 position: absolute 配合 z-index: -1 有时看似“能滚”，但这是因脱离文档流后与其他元素堆叠关系改变所致，属于偶然行为，且易引发布局错位、响应式异常等问题，不建议采用。
验证与调试技巧
- 使用浏览器开发者工具（Elements → Styles）临时禁用 z-index，观察滚动是否恢复；
- 在 Elements 面板勾选 “Show layout shifts” 或使用 “Rendering” 工具检查堆叠上下文；
- 检查是否有父容器设置了 transform、opacity
总结
滚动失效 ≠ overflow 未生效，而是交互层被阻断。z-index: -1 是前端开发中一个隐蔽却高频的“滚动杀手”。牢记：任何需要用户交互的可滚动容器，其 z-index 应 ≥ 0（或显式设为 auto），且避免在无明确需求时主动创建负堆叠上下文。修复只需一行 CSS，却能彻底解决看似玄学的滚动冻结问题。
