当容器设置了 overflow-y: scroll 却无法滚动时，常见原因是其 z-index 被设为负值（如 -1），导致该元素被置于其他层之下，鼠标滚轮/触摸滚动事件无法被捕获。
当容器设置了 `overflow-y: scroll` 却无法滚动时，常见原因是其 `z-index` 被设为负值（如 `-1`），导致该元素被置于其他层之下，鼠标滚轮/触摸滚动事件无法被捕获。
在 CSS 布局中，z-index 不仅影响视觉层叠顺序，更直接影响用户交互的可点击性与可滚动性。即使一个元素拥有正确的 overflow-y: scroll 和足够内容高度，若其 z-index 为负值（例如 -1）且父容器未建立新的层叠上下文，该元素将被“压”到
或其他非定位元素之下——此时浏览器会将其视为“不可交互区域”，滚动事件（包括鼠标滚轮、触控拖拽、键盘方向键）均被忽略。你提供的样式中问题明确：
.exampleDiv {
/* ... 其他属性 */
position: relative;
z-index: -1; /* ⚠️ 根本原因：负 z-index 阻断交互 */
overflow-y: scroll;
}position: relative 是启用 z-index 的前提，但 z-index: -1 会使 .exampleDiv 渲染在默认文档流层（z-index: 0）之下。即使滚动条可见，它实际位于“不可响应”的层级，用户操作完全无效。
✅ 正确修复方式有以下两种（任选其一）：
立即学习“前端免费学习笔记（深入）”；
方案一：移除或重置 z-index（推荐）
将 z-index 设为 0 或正值，确保其处于可交互层：
.exampleDiv {
background-color: white;
width: 96vw;
height: 80vh;
border: 1px solid gray;
text-align: center;
position: relative;
z-index: 0; /* ✅ 改为 0 或 auto（默认） */
overflow-y: auto; /* 推荐用 auto，仅在需要时显示滚动条 */
scroll-behavior: smooth;
}方案二：避免使用负 z-index（除非强依赖层叠逻辑）
若设计上确实需背景下沉效果，不应通过负 z-index 降级交互容器，而应改用其他方式实现视觉层次，例如：
- 使用伪元素 ::before 绘制背景层，并设 z-index: -1
- 将内容容器保持 z-index: 1 或默认层级
- 利用 isolation: isolate 或 transform: translateZ(0) 创建独立层叠上下文（更现代且安全）
? 注意事项：
- z-index: auto 与 z-index: 0 在无层叠上下文时行为一致，均属“默认交互层”；
- 避免对 overflow 容器设置 z-index: -1，这是 CSS 中典型的“隐形陷阱”；
- 测试滚动时，务必检查 DevTools 的 Layers 面板 或使用 Rendering > Paint flashing 确认元素是否被正确绘制并响应事件；
- 若仍不生效，请检查是否存在覆盖该区域的透明元素（如空 div、backdrop-filter 层等），它们也可能劫持事件。
总结：滚动失效 ≠ overflow 失效，而是交互权被剥夺。z-index 是 CSS 中少数同时操控视觉与交互的属性之一，务必谨慎使用负值——尤其对于承载用户操作的容器。修复只需一行代码，但理解其背后的层叠上下文（stacking context）机制，才是写出健壮 UI 的关键。
