如何在调整窗口大小时重叠两个图像答案

【问题标题】：How to Overlap two images on resizing window如何在调整窗口大小时重叠两个图像
【发布时间】：2016-11-19 04:16:41
【问题描述】：

我有一个产品页面，现在当用户减小浏览器大小时，我的产品图片左上方有一个促销图片，促销图片位于产品图片的顶部。我试图让它们重叠，以便销售图像超过产品图像 CSS 出售图片：

img.sale-img-home-page {
position: relative;
left: 22px;
margin-left: -15px !important;
z-index: 10;
}

HTML：

    <img src="path_to_sale_img.png" class="sale-img-home-page"> <a href="http://link_for_onclick"><img src="path_to_product_img.png" width="250" height="250" alt=""></a>

请看下图：

这里是代码笔http://codepen.io/rahulv/pen/xEpjLb的链接缩小浏览器大小，这样你就会看到预售图片在顶部

【问题讨论】：

查看更新的问题

标签： javascript css html image

【解决方案1】：

我不完全确定这是您想要实现的目标，但我会试一试。

JsFiddle 链接：https://jsfiddle.net/ofn85fLL/

片段：

img.sale-img-home-page {}@media (max-width: 430px) {
  .gozdziki {
    position: relative;
  }
  .sale {
    position: absolute;
    z-index: 1;
  }
}

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">

  <a class="prdocutname" href="http://localhost:8080/First_American/2014-5-silver-peregrine-falcon" title="2014 $5 Silver Peregrine Falcon">Name of product </a>

</div>
<div class="thumbnail">
  <img class='sale' src="http://lh3.googleusercontent.com/U0Tyh0HWDmwcq7-sKVtjJZhXF8CMHv8MtwvVBJF1lxmGg2frQfTPNdXaaQLaUYpm-rlmnxc=s152" class="sale-img-home-page">
  <a class='gozdziki' href="#">
    <img src="http://www.royaltyfreeimages.net/wp-content/uploads/2011/02/royalty-free-images-frozen-flowers.jpg" width="250" height="250" alt="">
  </a>

【讨论】：

【解决方案2】：

只需将位置更改为absolute并根据需要调整位置：

img.sale-img-home-page {
    position: absolute;
    top: 40px;
    left: 22px;
    z-index: 1;
}

http://codepen.io/anon/pen/XjVqyJ

【讨论】：

然后尝试添加.thumbnail { position: relative; }