负边距本身不会导致遮挡，遮挡源于层叠顺序与定位状态不匹配；z-index仅对非static定位元素生效，且受父容器层叠上下文限制，dom顺序优先于z-index，需同时满足定位、合理z-index值及上下文一致三条件才能使负margin+层级控制真正生效。
负边距本身不会导致遮挡，遮挡是层叠顺序（stacking context）和定位状态没配对的结果——margin-top: -20px把元素拉上来了，但它还在原层叠上下文中，后写的元素默认压在它上面。
为什么加了负 margin 元素却被盖住？
核心问题不是 margin，而是 z-index 没生效或算错层级。常见现象：margin-top: -30px让 A 盖住了 B 的视觉区域，但 B 仍显示在上层。
-
z-index只对position: relative、absolute或fixed元素有效，static元素写z-index: 999完全无效 - 父容器若带
opacity: 0.99、transform、filter或显式z-index（非auto），就会创建新层叠上下文，子元素的z-index只在该上下文中比较 - DOM 顺序优先级高于
z-index：两个同级元素，后写的那个即使z-index: 1，也会盖住前一个z-index: 999的元素
如何让负 margin + z-index 真正生效？
必须同时满足三个条件：定位、层叠值、上下文一致。漏掉任意一个，都白调。
- 给要“浮上来”的元素加
position: relative（或absolute），再设z-index，比如z-index: 10 - 确保它的父容器没有意外创建层叠上下文；如果父容器有
z-index: 0或opacity: 0.99，就把子元素的z-index提到更高（如z-index: 100），或直接去掉父容器的这些属性 - 若涉及多个卡片/模块，用递增
z-index值（z-10、z-11、z-12），别跳着写（如z-1和z-100），否则插入新项时极易冲突
父容器 overflow: hidden 为什么让负 margin “失效”？
不是失效，是被裁掉了。负边距推出来的部分仍在渲染，但被父容器的裁剪框切掉了。
-
overflow: hidden只裁剪内容区、内边距、边框，但**不裁剪负 margin 推出的外边距区域**——前提是父容器没触发新的层叠上下文；一旦触发，裁剪行为可能变化 - 调试时先关掉
overflow: hidden，确认负 margin 是否真起作用；再决定是保留裁剪+换方案（如用transform: translateY(-20px)），还是放宽裁剪（如overflow: visible） - Flex/Grid 容器中，
overflow: hidden对负 margin 的裁剪更“强硬”，有时连position: absolute都逃不出去，这时优先考虑改布局方式
真正难调的从来不是负 margin 数值，而是它和 position、z-index、父容器层叠上下文这三者的隐式耦合。改一行 padding，可能就要重算所有偏移和层级。现代项目里，能用 grid 或 flex 语义化解决的，就别靠负 margin + z-index 硬顶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
