最简可靠方案是display: flex配合margin-left负值实现头像重叠，首项设margin-left: 0，其余统一设margin-left: -8px，无需定位、兼容性好、响应式易扩展。
用 CSS flex 实现头像组重叠排列（最简可靠方案）
直接用 display: flex + margin-left: -12px 是当前兼容性最好、控制最直观的方式。不需要定位、不依赖父容器宽高，响应式也容易加。
常见错误是给每个头像加 position: relative 再用 left: -12px —— 这会导致布局脱离文档流，后续元素错位，且在 Flex 容器里完全没必要。
- 所有头像放在一个
<div class="avatar-group"> 容器内<li>容器设 <code>display: flex，头像用<img>或带border-radius: 50%的<div> <li>给头像统一设 <code>margin-left: -8px（数值 = 重叠量，建议 6–12px） - 第一个头像保持
margin-left: 0，可用.avatar-group > :first-child覆盖
.avatar-group {
display: flex;
}
.avatar-group > * {
border-radius: 50%;
width: 32px;
height: 32px;
margin-left: -8px;
border: 2px solid #fff;
}
.avatar-group > :first-child {
margin-left: 0;
}
用 CSS grid 做等距重叠（适合固定数量+需对齐场景）
Grid 更适合「头像数固定、要严格左对齐+等间距重叠」的情况，比如三人评审组、四人协作图标。Flex 在数量动态时更稳，Grid 则在对齐精度上更有优势。
关键点在于用 grid-template-columns 定义列轨道，再用 grid-column-start 让后一个头像从上一列的中间开始占位 —— 实际是视觉重叠，不是靠负 margin 挤。
- 容器设
display: grid和grid-auto-flow: column - 每个头像设
grid-column: span 2，再配合grid-column-start: auto防止错列 - 必须显式设
gap: 0，否则默认 gap 会破坏重叠效果 - IE 不支持
grid-auto-flow: column，如需兼容 IE，别选这个方案
重叠时头像边框/阴影被遮挡怎么办
重叠后右边头像的左边框、左边头像的右边阴影常被盖住，本质是绘制顺序问题：DOM 顺序靠后的元素默认层叠在上。解决方向只有两个：改绘制顺序，或改边框/阴影位置。
- 不要用
z-index单独调每个头像 —— 动态增删时难维护 - 统一给所有头像加
box-shadow: 2px 0 4px rgba(0,0,0,0.1)，把阴影偏移到右侧，避开重叠区 - 边框建议只设在「外露侧」：
border-right: 2px solid #fff（对非末尾头像），末尾那个再补border-left - 如果用了
border: 2px solid #fff，确保父容器背景色和边框同色，否则缝隙会漏底色
Vue/React 中动态渲染头像组要注意什么
框架里循环渲染时，v-for 或 {avatars.map()} 默认按数组顺序生成 DOM，这和视觉重叠顺序一致，没问题。但容易踩的坑在 key 和状态更新上。
-
key必须用稳定唯一值（如用户 id），不能用索引:key="index"—— 否则删除中间头像时，后面节点复用导致重叠错乱 - 添加新头像后，若发现重叠量突然变大，检查是否因新头像没应用
margin-left: -8px—— 框架插入新节点时样式未及时生效，加key或强制重绘可解 - 移动端小屏下建议加媒体查询：重叠量从
-8px收窄到-4px，避免头像挤成一团看不清
重叠像素值看似小，但影响的是整个组的呼吸感和可点击区域。实际项目里，-8px 是多数设计稿接受的临界点，再大容易误触，再小又失去重叠意义。留出 2px 边框间隙比追求极致重叠更重要。
