当使用 position: fixed 显示弹出层时，若内容高度超出视口且无法滚动，根本原因常是固定定位与 overflow 行为冲突；改用 position: relative 并配合动态定位可彻底解决。
当使用 `position: fixed` 显示弹出层时，若内容高度超出视口且无法滚动，根本原因常是固定定位与 overflow 行为冲突；改用 `position: relative` 并配合动态定位可彻底解决。
在 Web 开发中，点击表格列触发详情弹窗（如 .overlay）是常见交互。但许多开发者会遇到一个典型问题：弹窗内容高度超过 400px，设置了 overflow-y: auto 却仍无法滚动——滚动条不出现、鼠标滚轮无响应，甚至内容被截断“消失”。问题根源往往不在 CSS 的 overflow 属性本身，而在于 position: fixed 与容器尺寸、文档流及滚动上下文的耦合关系。
✅ 正确解法：改用 position: relative + 动态定位
position: fixed 使元素脱离文档流并相对于视口定位，此时其 height 和 overflow 行为易受父容器（尤其是 body 或滚动容器）的 overflow、transform、will-change 等属性干扰。更关键的是：若 .overlay 的父容器（如 body）未显式设置 height: 100vh 或 overflow: visible，固定定位元素的滚动上下文可能被意外剪裁。
将定位方式改为 position: relative 后，元素回归文档流，overflow-y: auto 可正常生效。只需微调 JS 定位逻辑，确保弹窗出现在预期位置：
.overlay {
position: relative; /* 关键：脱离 fixed 限制 */
display: none; /* 初始隐藏，避免 FOUC */
width: 458px;
max-height: 422px; /* 推荐用 max-height 替代 height，更灵活 */
background: #FFFFFF;
box-shadow: 0px 3px 6px #1F1F1F29;
z-index: 1000;
overflow-y: auto; /* ✅ 此时真正生效 */
padding: 16px; /* 增加内边距提升可读性 */
}
对应 JavaScript 需同步调整定位计算（注意：relative 定位基于其最近的非 static 定位祖先，通常为 body）：
tdWithProgression.forEach(td => {
td.addEventListener('click', (event) => {
event.stopPropagation();
const tr = td.parentElement;
tr.style.background = 'white';
// 获取点击位置（相对视口）
const rect = td.getBoundingClientRect();
const topset = rect.top + window.scrollY + 10; // +10 偏移避免遮挡
const leftset = rect.left + window.scrollX;
overlay.style.display = 'block';
overlay.style.top = topset + 'px'; // ✅ 直接使用计算后的像素值
overlay.style.left = leftset + 'px';
});
});
⚠️ 注意事项：
- 若页面存在 transform、perspective 或 filter 的祖先元素，可能创建新的 stacking context 或剪裁区域，间接影响 fixed 元素渲染；
- 使用 max-height 而非 height 可让内容自适应，避免强制截断；
- 弹窗建议添加 padding 和 box-sizing: border-box，防止内边距撑破宽度；
- 在移动端需额外测试 touch-action: auto 是否启用，确保触摸滚动正常。
✅ 验证滚动是否生效
可在控制台快速验证：
// 检查滚动高度与客户端高度
console.log('scrollHeight:', overlay.scrollHeight);
console.log('clientHeight:', overlay.clientHeight);
console.log('computed overflow-y:', getComputedStyle(overlay).overflowY);
若 scrollHeight > clientHeight 且 overflow-y 为 auto 或 scroll，滚动条应自动出现。
通过这一调整，你不仅解决了滚动失效问题，还提升了弹窗的可访问性（支持键盘 Tab 导航与空格/Enter 触发滚动）和响应式鲁棒性。定位逻辑更可控，也便于后续扩展拖拽、动画等交互能力。
