How to build a responsive layered image with content below? - css

Question

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>

Answer 1

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.