CSS使用position absolute定位小图片至目标对象左下角的问题

当然可以实现，核心思路是用相对定位的容器+绝对定位的徽章，结合百分比定位或自定义CSS变量来适配不同宽度的大图，具体实现如下：

1. 基础结构与通用CSS #

先给每张大图套一个相对定位的容器，徽章作为容器的子元素，这样徽章的绝对定位会基于这个容器（而非页面）：

<!-- 通用结构 -->
<div class="image-wrapper">
  <img src="product-large-1.jpg" alt="产品大图" class="main-img">
  <img src="warranty-badge.png" alt="质保徽章" class="quality-badge">
</div>

<!-- 针对位置特殊的大图，可直接在容器上定义自定义变量 -->
<div class="image-wrapper" style="--badge-left: 25%; --badge-bottom: 12%;">
  <img src="product-large-2.jpg" alt="产品大图" class="main-img">
  <img src="warranty-badge.png" alt="质保徽章" class="quality-badge">
</div>

对应的CSS：

.image-wrapper {
  position: relative;
  /* 根据布局需求设置容器宽度，比如自适应父容器 */
  width: 100%;
  max-width: 600px;
}

.main-img {
  display: block;
  width: 100%;
  height: auto; /* 保证大图等比例缩放，避免定位比例错乱 */
}

.quality-badge {
  position: absolute;
  /* 默认定位比例，可通过自定义变量覆盖 */
  left: var(--badge-left, 18%);
  bottom: var(--badge-bottom, 10%);
  /* 徽章尺寸，可固定或用百分比自适应 */
  width: 70px;
  height: auto;
}

2. 适配不同场景的细节调整 #

• 如果所有目标对象的左下角在大图中的比例固定：直接把left和bottom写死为固定百分比（比如left:18%; bottom:10%;），不用自定义变量，所有徽章会自动对齐到对应位置。
• 如果目标对象的位置比例不固定：给对应大图的容器加上--badge-left和--badge-bottom变量，单独调整该图的徽章位置，精准适配不同的目标对象。
• 徽章需要随目标对象宽度自适应：可以把徽章的宽度设为百分比（比如width: 15%;），这样徽章大小会随大图等比例缩放，保持视觉一致性。

关键注意事项 #

• 必须保证大图是等比例缩放的（设置height:auto），否则百分比定位的比例会因为图片拉伸而偏移。
• 容器的position:relative是核心，它决定了徽章的绝对定位参考系，不能省略。

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