负 margin 不导致重叠，而是使元素物理偏移出原占位；重叠是偏移与邻近元素空间交集的视觉结果；真正需解决的是偏移未生效或重叠不按预期的原因。
负 margin 本身不会“导致”重叠，它只是让元素在渲染时物理偏移出原本的布局占位；重叠是这个偏移和邻近元素空间交集后的视觉结果。真正要解决的，不是“怎么不让它重叠”，而是“为什么偏移没生效”或“为什么重叠得不按预期”。
负 margin 没效果？先查这五种压制行为
写了 margin-top: -20px 却纹丝不动，大概率不是写错了，而是被更高优先级规则截断或覆盖：
-
overflow: hidden或overflow: auto的父容器 → 偏移发生了，但溢出部分被裁掉，看起来像没动 -
display: flex容器中用了justify-content或align-items→ 弹性对齐逻辑会重算子项位置，把负 margin 的初始偏移“拉回”了 - 上下相邻块级元素发生外边距合并（margin collapse）→
margin-top: -10px和上一个兄弟的margin-bottom: 15px合并后只剩15px，负值被抵消 - 元素设置了
float→ 负 margin 行为不稳定，尤其清除浮动不彻底时，偏移方向和幅度都难预测 - 元素是
table、td、tr等表格相关标签 →margin本就不生效，负值也无效
重叠后 z-index 不起作用？别漏掉 position
给元素加了 z-index: 999，但它还是被盖在下面——因为 z-index 只对“定位元素”有效。负 margin 不会触发定位，所以必须显式设置 position 才能激活层级控制：
- 加
position: relative最常用，不改变文档流位置，只启用z-index - 用
position: absolute也能生效，但会脱离文档流，可能影响后续布局 - 别只改
z-index，不设position，那值再大也没用
父容器高度塌陷：子元素上移后背景/边框消失
子元素用了 margin-top: -30px 往上顶，父容器却“看不见”这部分，高度变矮、背景被裁、边框断开——这是父容器没有形成 BFC（块级格式化上下文），无法包含溢出内容：
- 推荐方案：给父容器加
display: flow-root，语义清晰且不影响其他样式 - 兼容方案：加
overflow: hidden，但会意外隐藏其他溢出内容（比如下拉菜单） - 避免方案：用
padding-top: 30px抵消，会导致结构耦合，响应式时容易错乱
想微调又怕扰动布局？优先考虑 transform
如果目标只是“让这个按钮往左挪 5px”“让卡片右下角微微露出一点”，且不希望影响兄弟元素位置或触发重排，transform: translateX(-5px) 比 margin-left: -5px 更安全：
-
transform是纯渲染层偏移，不改变getBoundingClientRect()返回的 layout position - 不影响父容器
scrollHeight，也不影响后续兄弟元素的定位基准 - 但注意：
transform不适用于需要“用负 margin 上提下一个块级元素”的场景，比如时间轴中用margin-bottom: -20px让箭头和文字贴紧
负 margin 的复杂点不在语法，而在它和文档流、BFC、弹性布局、外边距合并这些机制的交织。最容易被忽略的是：你以为自己在“移动元素”，其实浏览器在 layout 阶段早已把它钉死在某个坐标，你只是在 paint 阶段悄悄画偏了而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
