如何构建具有以下内容的响应式分层图像？

Question

我已经测试过使用在 jpg 上具有透明度的 png 并为顶部图像使用绝对定位来创建分层图像，但这会扰乱应显示在图像下方的内容的定位。因此，我尝试不使用Overlay Divs Without Absolute Position 描述的绝对定位。这适用于图像宽度为 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
 }

使用此代码，两个图像将与其父 div 重叠。