负margin本身不创建层叠上下文，仅物理位移元素；z-index需配合position属性才生效，且受父级层叠上下文限制。
负margin导致元素错位或遮挡，根本原因不是z-index没设好
负margin本身不创建层叠上下文，它只是把元素“物理挪动”——位置变了，但层叠顺序仍由父容器的层叠上下文决定。这时候硬加z-index没用，除非先让该元素变成定位元素并触发新的层叠上下文。
- 必须配合
position: relative、absolute或fixed才能使z-index生效 - 如果父容器有
opacity 、<code>transform、filter等属性，会隐式创建层叠上下文，子元素的z-index只在该上下文中起作用 -
margin-top: -20px会让元素向上挤，但它的层叠层级可能仍低于后面兄弟元素（尤其当后者是普通流内块级元素）
什么时候该用z-index + 负margin，什么时候不该
典型适用场景：弹出层、下拉菜单、带遮罩的模态框——需要精确控制视觉层级；不适用场景：纯布局微调（比如让标题和图片对齐）、响应式间距修正。
- 用
z-index的前提是：你真正在处理「多个视觉重叠区域的绘制顺序」，而不是单纯想“让这个div看起来靠前一点” - 如果只是为了解决负
margin后内容被盖住，优先检查是否误用了float或display: inline-block引发的行框塌陷 - 移动端慎用
z-index叠加过深（>999），某些Android WebView对高值解析异常，建议控制在z-index: 10~999之间
常见错误：负margin + z-index 看似生效，实则埋雷
最典型的现象是：开发时一切正常，上线后某几个页面突然出现遮挡错乱，尤其是动态插入DOM或使用visibility: hidden切换时。
- 错误写法：
div { margin-top: -10px; z-index: 2; }→ 缺少position，z-index被浏览器忽略（但不报错） - 错误写法：
.parent { transform: translateY(0); } .child { margin-left: -5px; z-index: 1; position: relative; }→ 父级transform创建了新层叠上下文，.child的z-index只在父内有效，无法越过父级影响外部元素 - 调试技巧：Chrome DevTools 中勾选“Layers”面板，看是否真的生成了独立合成层；或者临时加
outline: 1px solid red确认元素实际渲染位置
更稳妥的替代方案：别硬扛负margin的层叠副作用
很多情况下，负margin只是因为布局模型没理清。与其反复调z-index，不如换种方式达成相同视觉效果。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateY(-10px)代替margin-top: -10px——它不脱离文档流，且天然触发合成层，层级更可控 - 用
clip-path或mask裁剪边缘，比靠负边距“抠”出来更稳定（尤其适配缩放、高DPI屏） - 若必须用负
margin，统一在父容器上设置position: relative和z-index，子元素只负责位移，不参与层叠决策
margin和z-index混用时，真正难的不是怎么写，而是判断「当前问题到底属不属于层叠顺序问题」——多数时候，遮挡是因为盒模型计算错了，而不是Z轴没排对。 
