margin-right: -25px 是首选方案，因其精准控制重叠、不触发重排、兼容性好（IE10+），但需配合 overflow: hidden 防溢出，并通过媒体查询适配响应式断点。
直接用 margin-right 负值是最简单、最可控的实现方式，无需 flex-wrap 或 z-index 干预，但必须处理好容器溢出问题。
为什么 margin-right: -25px 是首选方案
头像重叠本质是让后一个头像覆盖前一个的右侧区域，负外边距能精准控制覆盖宽度，且不改变文档流、不触发重排。相比 position: relative + z-index 或 transform: translateX()，它更轻量、兼容性更好（IE10+ 全支持），也更容易响应式调整。
- 负 margin 值建议用固定单位（如
px），避免用%—— 否则在不同宽度容器中覆盖比例会漂移 - 所有头像需统一尺寸（如
width: 60px; height: 60px;），否则重叠边缘会错位 - 头像必须是 inline-level 元素（
<img>默认符合），若用<div>包裹则需加display: inline-block
overflow: hidden 不加就会溢出容器
负 margin 会让最右侧头像的一部分“伸出去”，如果父容器没设 overflow: hidden 或没限制宽度，它就会突破边界，尤其在小屏或窄容器中明显。这不是 bug，而是 CSS 盒模型的正常行为。
- 解决方法不是删负 margin，而是给容器加
overflow: hidden—— 简单粗暴有效 - 如果需要保留溢出部分（比如做悬停动画），就得换思路：用
flex-direction: row-reverse+margin-left: -25px，再配合justify-content: flex-end把重叠起点锚定在右侧 - 别依赖
flex-wrap: wrap来“兜底”——它会让头像折行，破坏重叠意图
响应式下重叠间距怎么调才不崩
固定负 margin 在大屏和小屏下视觉重叠量差异很大：大屏看着稀疏，小屏可能堆成一团。真正健壮的做法是用媒体查询分段控制，而不是试图用 calc() 混合单位。
立即学习“前端免费学习笔记（深入）”；
- 小屏（
max-width: 480px）：设margin-right: -16px，头像尺寸缩到40px - 中屏（
481px – 768px）：用margin-right: -20px，尺寸50px - 大屏（
min-width: 769px）：恢复margin-right: -25px，尺寸60px - 避免对
margin-right做vw计算——它会随视口宽连续变化，导致重叠量抖动，用户感知明显
重叠效果看似简单，但实际卡点都在容器边界和响应式断点上；很多人调了半天 z-index 或 transform，最后发现只是忘了给父容器加 overflow: hidden。
