absolute与fixed定位核心区别在于参考系：absolute相对最近已定位祖先，fixed始终相对视口且滚动不动；前者适合随页面滚动的弹窗，后者适合屏幕钉住的浮层。
absolute 和 fixed 定位的核心区别在哪
关键看「参考系」：absolute 相对于最近的已定位（position 为 relative、absolute 或 fixed）祖先元素；fixed 始终相对于视口（viewport），滚动时不动。
弹出层若需随页面滚动而移动（比如遮罩层下内容可滚，弹窗跟着动），选 absolute；若要钉在屏幕某处不随滚（如右下角通知、全局操作浮层），必须用 fixed。
-
fixed元素会脱离文档流，且在 iOS Safari 中可能触发输入框聚焦时键盘顶起导致定位错乱 -
absolute若父容器没设position: relative，会一直往上找，最终可能相对body或html，行为不可控 - 两者都受
transform影响：父级加了transform，fixed会退化为相对该元素定位（Chrome/Firefox 已修复，但 Safari 旧版本仍存在）
遮罩层 + 弹窗组合的常见写法
典型结构是两层：全屏 overlay（半透黑）+ 居中 modal。二者定位方式常搭配使用：
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 480px;
z-index: 1001;
}
- 不用
absolute做遮罩，否则滚动时遮罩会“漏”出顶部或底部 -
modal用fixed+transform居中，比用margin或top/left配合固定宽高更健壮 - 务必设置
z-index，且modal必须高于overlay，否则点不到内部按钮
移动端 fixed 定位的兼容性坑
iOS Safari（尤其 iOS 12–15）在软键盘弹出时，fixed 元素可能被错误地“吸附”到页面顶部或消失。这不是 bug，而是浏览器为腾出输入空间做的强制重排。
立即学习“前端免费学习笔记（深入）”；
- 临时方案：监听
focus事件，在 input 获取焦点时，将modal切换为absolute，并动态计算top值（基于window.scrollY+ 视口偏移） - 避免在
fixed元素内放input或textarea，优先用absolute+ 滚动容器包裹表单 - 不要依赖
vh单位做高度（Safari 中键盘弹出会改变vh计算值），改用height: 100%配合父容器min-height: 100vh
z-index 不生效？先检查 stacking context
z-index 只在同一个 stacking context 内有效。如果父容器有 opacity < 1、transform、filter 或 will-change，就会创建新 stacking context，子元素的 z-index 只在该上下文中比较。
- 遮罩层和弹窗必须处于同一 stacking context，否则即使
z-index: 9999也可能被盖住 - 排查方法：用 Chrome DevTools 的「Layers」面板查看 stacking context 层级
- 简单解法：确保遮罩和弹窗的共同父级没有意外触发 stacking context（比如删掉无意义的
opacity: 0.99）
