如何在flex-box容器中叠放两张图片且保留产品图在a标签内？

完全可以保留产品图在a标签内，仅需修改少量CSS、给折扣图新增专属类名即可实现叠放效果，原有布局逻辑不需要改动。

修改后的CSS代码 #

.image-wrapper {
    height: 50%;
    margin-top:20px;
    flex-grow: 1;
    /* 新增：作为子元素绝对定位的参照容器 */
    position: relative;
}

.image-wrapper a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 调整原有选择器，仅作用于a标签内的产品图，避免影响折扣横幅 */
.image-wrapper a img{
    width: auto;
    max-height: 100%;
}

/* 新增：折扣横幅专属样式 */
.discount-banner {
    position: absolute;
    /* 示例为横幅铺满整个容器，可按需调整位置尺寸 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 确保横幅显示在产品图上层 */
    z-index: 1;
    /* 可选：避免图片拉伸变形 */
    object-fit: contain;
}

修改后的HTML代码 #

<div class="image-wrapper">
      <a href="{{p.link}}" target="_blank" rel="noopener">
        <img src="https://lh3.googleusercontent.com/proxy/9R1yfiOspfOVdrip4b4kF5i1cCaJWmdyKRJbtXw6bnmXiPqYRLZyUYYJL3MwiRWay8JjDNmdT8cpgxB7pBgWdLz04s6mjEYDE-DD5btDasFt7j-KPraA0YIFiF2rN2kSq9uq0PYNHc46NVmEokNuc1GbhujtP_NKyg72rnM" alt="Image of product" />
      </a>
      <!-- 仅新增class属性，其余结构不变 -->
      <img class="discount-banner" src="https://lh3.googleusercontent.com/proxy/9R1yfiOspfOVdrip4b4kF5i1cCaJWmdyKRJbtXw6bnmXiPqYRLZyUYYJL3MwiRWay8JjDNmdT8cpgxB7pBgWdLz04s6mjEYDE-DD5btDasFt7j-KPraA0YIFiF2rN2kSq9uq0PYNHc46NVmEokNuc1GbhujtP_NKyg72rnM" alt="Discount-banner" />
</div>

自定义调整说明 #

如果需要将折扣横幅放在特定位置（比如右上角折扣标签），可修改.discount-banner的定位参数，示例：

.discount-banner {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 70px;
    height: auto;
    z-index: 1;
}

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