如何在下面的内容中构建一个响应式分层图像

Question

我已经测试了使用JPG上具有透明度的PNG创建分层图像，并为顶部图像使用绝对定位，但是使应该出现在图像下方的内容的定位感到不安。因此，我尝试了覆盖divs所描述的没有绝对位置的绝对定位。这适用于图像宽度为100％的较宽屏幕，但是在较小的屏幕上，当图像宽度缩放到顶部图像时，由于固定的负顶部边缘。

。

无论如何，是否有可以正确定位的响应式分层图像，而不必使用媒体查询设置负面最高边距？我在

上创建了一个测试

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

如果我理解正确，则要彼此重叠2个图像？

我将在#LayeredImage上使用position: relative，并且在IMG上使用position: absolute：

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

使用此代码，这两个图像都会与他们的父级重叠