弹窗应使用 position: fixed 实现不随滚动偏移，避免嵌套在 transform 等创建新 containing block 的祖先中；内容区设 max-height + overflow-y: auto；遮罩与弹窗需同 stacking context 且 z-index 分层（如 1040/1050）；弹窗开启时 body 加 overflow: hidden 防穿透，关闭后及时恢复。
弹窗本身不随滚动偏移：用 position: fixed 而非 absolute
滚动时弹窗跟着页面跑，本质是定位方式错了。只要父容器或文档流滚动，position: absolute 的元素就会相对最近的「已定位祖先」定位——而这个祖先往往不是视口，导致它被卷走。position: fixed 才真正锚定视口，不管页面怎么滚，它都钉在那儿。
- 必须确保弹窗根元素（比如
.modal）直接设position: fixed，且不被嵌套在transform、perspective或filter非 none 的祖先里（这些会创建新的 containing block，让fixed失效） - 不要依赖 JS 动态计算 top/left 来模拟 fixed 效果——既脆弱又影响性能
- 移动端要注意：iOS Safari 对
fixed在某些缩放或输入框唤起场景下有兼容问题，需加viewportmeta 控制
超长内容可滚动：只对内容区设 overflow-y: auto
整个弹窗设 overflow 会导致边框/遮罩也被裁剪，还可能触发非预期的滚动条；正确做法是把可滚动区域限定在内容容器内部，比如 .modal-body。
- 给内容区（如
.modal-content）设max-height+overflow-y: auto，高度值建议用calc(100vh - Xpx)，预留标题、按钮等固定区域空间 - 避免用
height: 100%—— 它依赖父级显式高度，在 flex 布局中容易失效；flex: 1配合min-height: 0更可靠 - 滚动条默认占空间，若要隐藏又保留滚动能力，可用
overflow-y: overlay（仅 Safari）或自定义伪元素，但注意可访问性影响
遮罩层和弹窗层级关系：z-index 必须分层管理
弹窗被遮罩盖住、或遮罩盖不住背景内容，基本都是 z-index 冲突。遮罩和弹窗必须属于同一 stacking context，且弹窗层级高于遮罩。
- 遮罩层（
.modal-overlay）设z-index: 1040，弹窗（.modal）设z-index: 1050，这是 Bootstrap 等主流库的惯例，也方便后续扩展 - 禁止在任意中间容器上乱加
z-index，尤其不要给position: relative的普通盒子设 z 值——这会无意中创建新 stacking context，切断层级继承 - 检查 DevTools 的 Layers 面板，确认弹窗和遮罩是否真在同一个 stacking context 下；如果不是，说明中间有
transform、opacity 等隐式创建 context 的属性
移动端滚动穿透：弹窗打开时禁用 body 滚动但保留弹窗内滚动
桌面端通常没问题，但 iOS 和部分 Android 浏览器在弹窗打开时，如果 body 还能滚，手指一滑就整个页面动了，内容区反而卡住——这不是 bug，是浏览器对 fixed 元素内滚动的特殊处理。
- 弹窗显示时给
加overflow: hidden，同时确保弹窗内容区有touch-action: auto（默认值，但某些重置样式会改掉） - 别用
position: fixed; top: 0把 body “锁死”，这在 iOS 上反而导致内容区无法滚动；老老实实关overflow最稳妥 - 关闭弹窗后务必恢复 body 的
overflow，否则用户返回后发现页面不能滚，容易误以为页面坏了
弹窗滚动和定位看着简单，实际卡点全在 stacking context、containing block 和移动端 touch 行为的隐式规则上。这些地方没理清，调样式只会越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
