如何实现图片与信息盒的错位视觉效果并保持响应式？

问题根源 #

原代码用position: relative配合top/right偏移图片，视觉上移动了元素，但图片原本占据的空间仍会保留，导致容器内出现多余空白，打乱flex布局的对齐逻辑，同时影响响应式适配。

解决方案 #

改用负margin实现图片偏移，既让图片覆盖在盒子上，又不会保留原空间，完美适配flex布局的响应式特性。同时统一类名，减少冗余代码：

优化后的CSS代码 #

.top-container {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  flex-wrap: wrap; /* 小屏幕自动换行，增强响应式 */
  gap: 20px; /* 子元素间距，替代margin */
}

.u1 {
  display: flex;
  align-items: center;
  position: relative;
}

.user-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: -30px; /* 负margin让图片覆盖盒子 */
  z-index: 1;
}

.stat-avatar {
  width: 100px;
  height: 100px;
  margin-right: -40px;
  z-index: 1;
}

.box {
  background: rgba(90, 211, 238, 0.166);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px 50px;
  padding-left: 60px; /* 给图片留出空间，避免文字被遮挡 */
}

.stat-box {
  padding-left: 70px; /* 适配更大的统计图标 */
  display: flex;
  justify-content: flex-end;
}

优化后的HTML代码 #

<div class="top-container">
  <div class="u1">
    <img src="https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp?size=1024" class="user-avatar" />
    <div class="box">yumbo1z</div>
  </div>

  <div class="u1">
    <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746646052904/IMG_2820.png?ex=6782b13e&is=67815fbe&hm=7f48431c52523089dff49abed5ccb94955c049f770c4568aab9ee89d7964792c&" class="stat-avatar" />
    <div class="box stat-box">9,100</div>
  </div>

  <div class="u1">
    <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&" class="stat-avatar" />
    <div class="box stat-box">9,100</div>
  </div>

  <div class="u1">
    <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&" class="stat-avatar" />
    <div class="box stat-box">9,100</div>
  </div>
</div>

关键改进点 #

• 用负margin替代position: relative偏移，既实现图片覆盖效果，又不破坏flex布局的空间分配
• 统一类名，减少重复代码，便于后续维护
• 给盒子添加padding-left，避免文字被图片遮挡
• 给.top-container添加flex-wrap: wrap和gap，增强小屏幕下的响应式表现
• 移除冗余的position: relative（仅.u1保留用于z-index上下文）

内容的提问来源于stack exchange，提问作者Shinpi Tekita