margin-top负值只移动绘制位置而不改变布局锚点，元素视觉上移但layout box顶部仍在原处，下方元素仍按原始边界对齐；常见失效原因包括外边距合并、overflow裁剪、行内元素限制及flex对齐覆盖。
margin-top负值只移动绘制位置，不改变布局锚点
设置 margin-top: -20px 后，元素视觉上移了，但它的 layout box（布局盒）顶部仍停在原处——浏览器计算下方元素起始位置时，用的正是这个“没动过”的顶部边界。所以下方块级元素不会跟着上提，只是看起来被“盖住”了。
常见错误现象：写了负 margin 却没看到重叠
这往往不是代码没生效，而是被其他机制“吃掉”了：
-
margin-collapse：上方兄弟元素的margin-bottom和当前元素的margin-top: -20px合并，实际只剩代数和（比如margin-bottom: 15px+margin-top: -20px→ 最终间距 -5px，但渲染可能受限于最小间距或父容器约束） - 父容器设了
overflow: hidden或overflow: auto：溢出部分被裁剪，视觉上“没动”，其实元素已偏移，只是看不见 - 元素是
inline或未触发 BFC 的inline-block：负margin-top对行内元素垂直对齐无效，需配合vertical-align
margin-top 负值 vs transform: translateY(-20px) 的关键区别
两者都让元素上移，但底层机制完全不同：
-
margin-top: -20px：参与盒模型计算，影响后续元素的布局基准，可能触发重排（reflow） -
transform: translateY(-20px)：纯绘制层偏移，layout box 完全不动，下方元素位置绝对不受影响，且不触发重排
如果目标只是视觉微调（比如卡片悬停上浮、导航吸附），transform 更安全、更可控；只有当你需要“压缩文档流垂直间距”或兼容老式等高列布局时，才考虑负 margin-top。
立即学习“前端免费学习笔记（深入）”；
flex 容器里负 margin-top 表现更“诚实”，但有隐藏前提
在 display: flex 容器中，子项默认不发生 margin collapse，margin-top: -10px 通常能按预期上移。但要注意：
- 若父容器设置了
align-items: center或flex-start，它会覆盖子项初始位置，导致负 margin 看似“失效” - 子项若同时设了
margin-top和align-self，后者优先级更高 - 移动端 Safari（尤其 iOS 17+）对负 margin +
z-index组合支持不稳定，有时需加will-change: transform或transform: translateZ(0)强制创建层叠上下文
真正容易被忽略的，是“负 margin 不是位移指令，而是盒模型空间声明”——它改的是 margin box 的尺寸和位置，不是元素坐标。写的时候得时刻问自己：我到底想动的是「布局锚点」还是「视觉呈现」？
