0

I've tested creating a layered image using a png with transparency over a jpg and using absolute positioning for the top image, however that upsets the positioning of content that should appear below the image. So then I tried without absolute positioning as described by Overlay Divs Without Absolute Position. This works for wider screens where the image width is 100%, but on smaller screens when the image width is scaled down the top image rides up because of the fixed negative top margin.

Is there anyway to achieve a responsive layered image with content positioned correctly below without having to set the negative top margin using media queries? I've created a test at

https://jsfiddle.net/6v0Ls54o/3/

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#productimage {
  background: #fff;
  max-width:486px;
  text-align:left;
  padding:0 20px 0 20px;
  margin:0;
  height:auto;
}

#layeredImage{
  margin:20px 0 40px 0;
  width:100%;
  height:auto;
  float:left
}

#layeredImage img{
  width:100%;
  height:auto;
}

#topImage{
  margin-top:-300px;
  float:left;
  position:relative;
  overflow:visible;
  z-index:1
}

#belowImage{
  float:left
}

.clear{
  clear:both;
  font-size:0;
  line-height:0;
  height:0;
  overflow:hidden;
  margin:0
}
<div id="productimage">
  <div class="titleWrapper">
    <h1>How to build a responsive layered image?</h1>
  </div>
  <div id="layeredImage">
    <img src="https://picsum.photos/486/300" alt="" width="486" height="300" id="bottomImage" />
    <img src="https://picsum.photos/486/300" alt="Top Image" title="Top Image" width="486" height="300" id="topImage" />
    <div class="clear"></div>
  </div>
  <div id="belowImage"><h2>Some info to appear below the image:</h2>
  <p>
  Is there a way to build a responsive layered image where content can appear below the layered image?
  </p></div>
  <div class="clear"></div>
</div>
Nick W
  • 877
  • 2
  • 15
  • 30
  • 1
    If you only positioned _one_ of the images absolute, the other would still span up the container … – 04FS May 07 '19 at 12:24
  • @04FS that appears to be the answer, thank you. Much simpler than I thought! :) – Nick W May 07 '19 at 12:36
  • @04FS I've updated the jsFiddle to prove it works at https://jsfiddle.net/6v0Ls54o/4/ Will you post your comment as an answer? – Nick W May 07 '19 at 12:47

1 Answers1

0

If I understand it correct, you want to overlap 2 images on top of each other?

I would use position: relative on #layeredImage and position: absolute on both img like this:

#layeredImage {
   position: relative;
 }
img {
   position: absolute;
   left: 0
   right: 0
 }

Using this code, both images will overlap withi their parent div.

Thessa Verbruggen
  • 331
  • 1
  • 16
  • position absolute for both images causes the content that is supposed to be below the image not to show. I believe this is due to 'absolute' causing the height of the #layeredImage div to be lost. This can be seen at https://jsfiddle.net/6v0Ls54o/5/ The answer is to only set position absolute for #topImage as suggested by 04FS in their comment above as seen at jsfiddle.net/6v0Ls54o/4 – Nick W May 08 '19 at 13:38