如何使用下面的内容构建响应式分层图像？

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.