如何设置双图片<div>布局避免元素堆叠？

一、替换transform:translate()的徽章布局方案 #

方案1：相对定位+绝对定位（推荐，不影响主布局） #

这种方式能让徽章完全脱离文档流，精准固定在卡片左侧，不会干扰主图和文字的排版：

<!-- HTML结构 -->
<div class="card-container">
  <img class="badge" src="你的徽章图片地址" alt="徽章">
  <img class="card-main-img" src="你的卡片主图地址" alt="主图">
  <p class="card-text">卡片下方文字内容</p>
</div>

.card-container {
  position: relative; /* 给徽章提供定位基准 */
  width: 300px; /* 卡片容器宽度，按需调整 */
  /* 其他样式：边框、背景等 */
}

.badge {
  position: absolute;
  left: -20px; /* 向左偏移到卡片外侧 */
  top: 10px; /* 垂直位置按需调整 */
  width: 50px; /* 徽章尺寸 */
  height: 50px;
}

.card-main-img {
  width: 100%; /* 主图占满容器宽度 */
  height: auto;
}

方案2：Flex布局（适合徽章和主图同排） #

如果需要徽章和主图在同一视觉行，用Flex排版更灵活：

<!-- HTML结构 -->
<div class="card-container">
  <div class="img-group">
    <img class="badge" src="你的徽章图片地址" alt="徽章">
    <img class="card-main-img" src="你的卡片主图地址" alt="主图">
  </div>
  <p class="card-text">卡片下方文字内容</p>
</div>

.img-group {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.badge {
  width: 50px;
  height: 50px;
  margin-right: 10px; /* 和主图的间距 */
}

.card-main-img {
  flex: 1; /* 主图占满剩余空间 */
  height: auto;
}

二、卡片阴影被容器右侧裁剪的修复方法 #

阴影被裁剪通常是容器overflow:hidden或内边距不足导致的，对应解决方法：

• 方法1：移除不必要的overflow:hidden
  检查卡片容器的CSS，如果没有必须隐藏溢出内容的需求，直接删掉overflow:hidden，阴影就能完整显示。

• 方法2：给容器添加右侧内边距
  如果必须保留overflow:hidden，给容器加足够的padding-right，让阴影有显示空间：

.card-container {
  padding-right: 12px; /* 值大于阴影的模糊+扩散半径，比如阴影是0 2px 8px rgba(0,0,0,0.1)，设10px左右即可 */
  overflow: hidden;
}

• 方法3：调整阴影的扩散方向
  不想改容器样式的话，可以把阴影水平偏移设为负值，减少右侧溢出：

.card-main-img {
  box-shadow: -2px 2px 8px rgba(0,0,0,0.1); /* 向左偏移阴影，避免右侧被裁 */
}

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