负margin不改变元素自身尺寸，只改变其占位空间和绘制位置；例如margin-top:-20px使元素视觉上移但文档流位置不变，下方元素仍按原位置对齐。
负 margin 不改变元素自身尺寸，只改“占位”和“画在哪”
设置 margin 为负值，不会让 offsetWidth、offsetHeight 或计算后的 width/height 发生变化。它只影响元素在布局中的“占位空间”（margin box）和浏览器最终“绘制的位置”。比如：
-
margin-top: -20px→ 元素视觉上移 20px，但它的文档流原始位置没变，下方兄弟元素仍按它“没动过”的顶部来对齐 -
margin-left: -15px→ 元素左边缘左移，右边 inline 元素会紧贴它新暴露的左侧 -
margin-right: -10px→ 元素自己不动，但右侧块级兄弟会左移 10px，可能叠上来（背景被盖，文字还在） -
margin-bottom: -30px→ 元素在流中“变矮了”30px，下个块级元素会上提，但它自己的高度、内容、边框全都不受影响
左右负 margin 会让 auto 宽度块级元素“看起来变宽”
当一个块级元素没设 width（即 width: auto），父容器有固定宽度时，负左右 margin 会扩大其内容区实际渲染宽度：
-
margin-left: -20px; margin-right: -20px→ 盒子总占用宽度增加 40px（内容区被“撑开”，但offsetWidth不含负 margin） - 这常用于全宽横幅：父容器
padding: 0 20px，子元素用width: calc(100% + 40px); margin-left: -20px; margin-right: -20px - 注意：若父容器未触发 BFC（如没设
overflow: hidden），这种“变宽”会导致横向滚动条或内容溢出
负 margin 在 Flex/Grid 中基本不“溢出”，行为受限
Flex 和 Grid 容器把子项的定位逻辑从文档流抽离了，负 margin 失去传统效果：
- 在
display: flex容器中，margin-right: -50px不会让子项穿出右边界，只会压缩它和下一个子项之间的 gap -
justify-content和gap的优先级高于负 margin；如果设置了gap: 10px，负 margin 无法抵消它 - Grid 子项即使加了
margin-left: -100px，也不会逃出 grid area，除非额外加position: absolute - 想在 Flex 中实现类似“拉伸”效果，得换思路：用
flex-grow、min-width或transform: translateX()
重叠时 z-index 常失效，不是 margin 的锅
用负 margin 让两个元素视觉重叠，不代表层级就自动确定了。z-index 是否起作用，取决于是否满足三个条件：
立即学习“前端免费学习笔记（深入）”；
- 元素必须有
position值为relative、absolute、fixed或sticky - 它们必须处于同一层叠上下文（stacking context）——父容器若用了
opacity、filter或transform，就会悄悄创建新上下文 - 没设
z-index的元素按 HTML 顺序堆叠，负 margin 不改变这个顺序 - 移动端 Safari 对
z-index+ 负 margin 组合支持不稳定，可临时加transform: translateZ(0)强制提升层叠上下文
display、position 和父容器是否创建了隐式 BFC 或 stacking context。 
