负margin使元素视觉偏移但不脱离文档流，重叠仅为绘制结果；z-index需配合position和层叠上下文才生效，混用时需显式设置以确保层级可控。
负margin让盒子“画错位置”，但不改变文档流占位
负margin本身不会让元素脱离文档流，它只强制浏览器把元素“画”到原本布局位置之外的地方。比如margin-top: -20px会让元素上边缘向上偏移20px，但它的原始高度、父容器高度计算、后续兄弟元素的起始位置，全按它“没动过”的状态来算。
这意味着：重叠是视觉结果，不是布局重组。你看到的覆盖，是A“画上去”了B，而B根本不知道A挪了——它还守着A原来的位置对齐。
- 块级元素优先用
margin-top或margin-left实现上/左重叠 -
margin-right: -20px不推自己，而是把右边兄弟“拉近”20px；margin-bottom: -20px同理，会把下方块级兄弟“上提”，但仅对普通流有效，flex/grid子项通常无视 - 别指望负margin能“挤走”浮动或绝对定位元素——它们的定位逻辑优先级更高
z-index在负margin场景下常失效，原因不是值设小了
写了z-index: 999却还是被盖住？大概率是因为元素根本没参与层叠上下文。z-index只对position为relative、absolute、fixed或sticky的元素生效，且必须确保它和目标元素处于同一层叠上下文层级中。
常见陷阱：
- 父容器用了
opacity、transform、filter（比如filter: drop-shadow()），会悄悄创建新层叠上下文，子元素的z-index就变成“局部有效”，再大也盖不过外部同级元素 - 两个都设了
position: relative的盒子，若没显式设z-index，则按HTML源顺序堆叠，负margin不改变这个默认顺序 - 想让重叠部分分层，直接给需前置的盒子加
z-index: 1（哪怕只是1），比依赖文档流更可靠
负margin + z-index混用时，层级和偏移是两件事
负margin控制“画在哪”，z-index控制“谁在上”，二者不耦合。一个元素即使margin-top: -50px盖住了上面的盒子，只要没设z-index或没触发层叠上下文，它依然可能被后面出现的、带z-index的兄弟元素压在底下。
实操要点：
- 要确保重叠区域的层级可控，至少给涉及重叠的两个元素都加上
position: relative和明确的z-index - 避免在同一个父容器里混合使用
float和负margin——浮动元素的z-index基本无效，除非额外加position - 移动端Safari对
z-index+ 负margin组合兼容性差，可临时加transform: translateZ(0)强制创建层叠上下文
为什么有时候负margin写了却没重叠效果
不是语法错，而是被更高优先级规则压制或裁剪。最常踩的坑集中在三类环境：
- 父容器设了
overflow: hidden或overflow: auto——溢出部分被直接裁掉，重叠不可见 - 在
display: flex容器中，justify-content: center等对齐规则会重置子项位置，覆盖负margin的偏移效果 - 相邻块级元素发生外边距合并（margin collapse）：
margin-top: -10px和上方元素的margin-bottom: 20px会合并为10px，实际偏移量缩水
调试时可用outline: 1px dashed red快速查看元素真实渲染边界，比border更不影响盒模型计算。
真正难处理的，是那些既需要精确偏移、又要求响应式稳定、还要兼顾无障碍访问的场景——这时transform: translate()往往比负margin更干净，因为它只影响绘制，不扰动布局流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
