如何在调整大小窗口上重叠两个图像

Question

我有一个产品页面，并且在我的产品图片的左上方有一个销售图片，现在当用户缩小浏览器尺寸时，销售图像会显示在产品图片的顶部。我试图让它们重叠，以便销售图像覆盖产品图像 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的链接 减少浏览器大小，以便您可以看到预售图像位于顶部

Answer 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>

Answer 2

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

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

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