使用CSS百分比单位将三个span标签移至图片左上角适配响应式布局

• 将商品卡片内分别标注Bestseller、New、Trending的三个span标签移动到商品主图左上角位置
• 适配响应式设计，定位相关CSS样式值必须采用百分比单位，禁止使用固定像素单位，避免不同屏幕尺寸下出现布局错位

不需要调整原有HTML结构，直接修改CSS样式即可实现效果：利用商品卡片父容器.ProductItem__Wrapper已设置的相对定位属性，将标签改为绝对定位模式，通过百分比值控制标签在父容器内的偏移位置，同时设置更高的堆叠层级保证标签显示在商品主图上方，通过不同的顶部偏移百分比让三个标签垂直排布不重叠。

<style>
  .ProductItem__Wrapper {
    position: relative;
  }
  
  .ProductItem__Wrapper span.ProductItem__Label {
    box-shadow: 0 0 6px #00000029;
    position: absolute;
    left: 2%;
    font-size: 12px!important;
    color: #a85e2f;
    padding: 0.3em 2%;
    z-index: 10;
    line-height: 1.4;
  }

  /* 三个标签按顺序设置垂直偏移，避免重叠 */
  .ProductItem__Wrapper span.newgreentag {
    top: 2%;
  }
  .ProductItem__Wrapper span.newbluetag {
    top: 10%;
  }
  .ProductItem__Wrapper span.newredtag {
    top: 18%;
  }
</style>

原有HTML结构无需任何改动，直接替换上述CSS即可生效。

• 所有定位相关属性（left、top）均使用百分比单位，会随商品卡片尺寸自适应缩放，不会出现响应式错位问题
• 已移除原有样式中会干扰定位的position: relative、top: 50%、left: 5px、height: 100%属性
• z-index: 10保证标签层级高于商品主图，不会被图片遮挡
• 三个标签的垂直间距可根据实际显示效果微调top的百分比值，适配不同字号下的显示需求

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