负margin能造成重叠，因为它不删除空间，而是让元素突破布局边界向指定方向视觉偏移，layout position不变但paint position被强制挪动，从而压盖邻近元素。
负 margin 为什么能造成重叠
因为负 margin 不是“删除空间”，而是让元素在渲染时**突破自身原本的布局边界**，向指定方向视觉偏移。它仍参与文档流（layout position 不变），但 paint position 被强制挪动，自然就压到邻近元素上了。
常见错误现象：margin-left: -20px 没效果？大概率是父容器设置了 overflow: hidden 或 overflow: auto，把溢出部分裁掉了；或者兄弟元素用了 display: flex 且没设 flex-wrap: wrap，导致负 margin 被弹性对齐逻辑压制。
- 向左重叠：对块级元素用
margin-left，对行内元素或 flex 子项也有效 - 向上重叠：用
margin-top，注意它可能触发外边距合并（margin collapse），尤其在相邻块级元素间 - 避免在
float元素上混用负 margin，行为不可控，现代布局应优先用flex/grid
负 margin 在 Flex 布局里还管用吗
管用，但效果受限。Flex 子项的 margin（包括负值）依然生效，能推动自身位置，但会被 justify-content 和 align-items 的对齐逻辑覆盖或压缩。
例如 justify-content: center 下，margin-left: -20px 可能只在初始渲染时闪一下，随后被居中逻辑重置。这不是 bug，而是 flex 容器主动“纠正”了子项的偏离。
立即学习“前端免费学习笔记（深入）”；
- 想稳定位移，优先用
transform: translateX(-20px)—— 它不参与布局计算，也不触发重排 - 若必须用负 margin，可配合
flex: none或设flex-shrink: 0减少弹性干扰 - 注意：flex 容器中垂直 margin 不会合并（collapse），这点比普通块流更可控
负 margin 和 z-index 配合时为什么经常失效
因为负 margin 只控制“在哪”，不控制“谁在上”。两个元素视觉重叠后，谁盖住谁，最终由层叠上下文和 z-index 决定，而非谁写了负 margin。
常见翻车场景：给 A 元素加 margin-top: -30px 让它盖住 B，结果 B 有 z-index: 1，A 却没设 position 或 z-index，此时 B 依然在上。
-
z-index生效前提：元素position必须是relative、absolute或fixed，static元素无视z-index - 祖先元素若创建了新层叠上下文（如
position: relative+z-index: 0，或opacity: 0.99、filter: blur(1px)），子元素的z-index就只在该上下文中比较 - 纯视觉重叠微调，有时用
background遮挡 + 负 margin 对齐，比硬调z-index更轻量
什么时候该换 transform 代替负 margin
当需要动画、响应式适配、或避免影响外边距合并时，transform: translate() 是更干净的选择。它只改变渲染位置，不影响任何布局计算，也不会触发重排。
比如卡片堆叠、按钮悬浮角标、时间轴箭头覆盖等场景，用 transform: translateY(-8px) 替代 margin-top: -8px，能规避 margin collapse、flex 对齐冲突、以及父容器 overflow 裁剪等问题。
-
transform不影响后续兄弟元素的定位基准（负 margin 会影响） -
transform在 GPU 渲染层操作，动画性能更好 - 注意：
transform: translateZ(0)或will-change: transform会隐式创建新层叠上下文，可能让z-index失效，慎用
