负margin从不失效，问题在于上下文：inline元素需改display；absolute定位应调top/left而非margin；浮动元素受浮动规则限制；overflow:hidden或z-index设置不当会遮蔽效果。
负margin在CSS里从不“失效”，只是你没给它留出能起作用的上下文。 它要么被文档流规则拦住，要么被定位方式绕过，要么被父容器物理裁掉——问题从来不在margin本身。
负margin对inline元素没反应？先改display
像<span></span>、<a></a>这种默认display: inline的元素，margin-top和margin-bottom压根不参与布局计算，左右margin也只影响自身盒内间距，不推挤邻居。
- 加
display: block或display: inline-block，所有方向margin立刻生效 - 更稳妥：直接上
display: flex，子项天然支持完整margin，包括margin: auto居中 - 别用
float硬凑——它会触发BFC、引发塌陷，反而让负margin行为更难预测
absolute定位下负margin“动不了”？该用top/left
position: absolute元素的margin不控制定位锚点，只影响盒内背景起始、边框位置和相邻margin合并。你调margin-left: -10px，它的左边缘还是由left值决定。
- 想左移？写
left: -10px，不是margin-left: -10px - 想右上角伸出？用
top: -8px; right: -8px，别写left: 100%; margin-top: -8px - 真要靠
margin微调，改用position: relative——它还在文档流里，margin推得动周围元素
浮动元素负margin盖不住前一个？检查浮动上下文
浮动元素遇到负margin，是先按浮动规则占位（比如float: left贴左上），再视觉偏移。所以margin-left: -20px能盖住前一个浮动元素，但盖不住前面的普通块级元素——它仍占据文档流位置，负margin穿不过去。
- 多个连续浮动元素都设负margin时，浏览器逐个计算边界，容易错位，不是所有负值都能叠加生效
- 父容器用了
clear: both或::after { clear: both }，负margin常“失灵”——清除操作闭合了浮动上下文，失去参照物 - 临时调试：给浮动元素加
outline: 1px dashed red，比border更能看清真实浮动边界
负margin写了却看不见？先查overflow和z-index
最隐蔽的“失效”往往不是margin没起作用，而是被父容器裁掉，或者叠在底下看不到。
-
overflow: hidden会物理裁剪所有超出部分，哪怕top: -10px+right: -10px也白搭 -
z-index在没设position时完全无效；两个position: relative元素若共用同一层叠上下文，z-index可能被父容器截断 - 移动端Safari对
z-index+浮动组合尤其脆弱，transform: translateZ(0)可强制创建新层叠上下文
真正难的不是写对负margin，而是判断它该在哪一层起作用：是在文档流里推挤，还是在浮动上下文中偏移，还是在绝对定位里配合top微调——选错上下文，代码再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
