负边距仅造成视觉偏移而不改变文档流位置，易致重叠、塌陷等问题；微调可用relative定位，精确定位应选absolute或transform。
负边距不能用来精确定位图像，它只是让元素“视觉上偏移”，但文档流位置不变——这是最容易踩坑的地方。
负边距会让 img 看起来偏移，但不改变布局占位
给 <img> 加 margin-left: -10px，图像会向左挪 10px，可它原本占据的空白区域还在原处，后面元素不会自动补上这个空隙。常见表现是图像重叠文字、父容器高度塌陷、相邻元素错位。
- 适用场景：微调对齐（比如让图标和文字基线对齐）、覆盖边框、实现简单重叠效果
- 不适用场景：响应式居中、绝对定位替代、需要精确坐标控制的布局
- 注意：
display值影响很大——inline图像受行高影响，加负margin-top可能只在视觉上动，实际基线没变
position: relative + 负 top/left 更可控
如果目标是“让图像离开原来位置且不影响其他元素”，优先用相对定位代替负边距。它移动的是渲染位置，文档流占位保持不变，但行为更可预测。
-
img { position: relative; top: -5px; left: 8px; }—— 移动后不会挤压或拉开周围内容 - 和负边距不同，它不参与外边距合并（margin collapse），避免意外间距消失
- 配合
z-index可控层叠顺序，负边距做不到这点
真正要精确定位图像，该用 position: absolute 或 transform
负边距和 relative 都属于“微调”，真要按像素定死位置，得脱离文档流或用变换。
立即学习“前端免费学习笔记（深入）”；
-
position: absolute; top: 20px; left: 30px;—— 相对于最近的position: relative祖先定位 -
transform: translate(-12px, 4px);—— 不触发重排，性能更好，且不影响其他元素布局 - 注意：
transform的偏移基于自身中心点，而top/left基于左上角；两者混合使用容易出偏差
负边距看着简单，但一嵌套、一换行、一加 vertical-align 就容易失控。真要调位置，先想清楚：是要“视觉偏移”还是“逻辑重定位”——选错方案，后面全是 margin 调试黑洞。
