Как перекрыть два изображения в окне изменения размера

#javascript #css #html #image

#javascript #css #HTML #изображение

Вопрос:

У меня есть страница продукта, и теперь, когда пользователь уменьшает размер браузера, изображение продажи отображается поверх изображения продукта. Я пытаюсь сделать так, чтобы они перекрывались, чтобы изображение продажи отображалось поверх изображения продукта 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>

Взгляните на следующее изображение:

Вот ссылка на code pen http://codepen.io/rahulv/pen/xEpjLb Уменьшите размер браузера, чтобы вы видели, что предпродажное изображение находится сверху

Ответ №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