如何用CSS实现移动端两张层叠图片的响应式布局？

原代码存在几个关键问题导致无法实现响应式层叠效果：

• 绝对定位使用固定像素值（如.stacking2的left:1050px），在小屏幕设备上会直接溢出可视区域
• 图片的偏移量（top/left）采用固定像素，无法随屏幕尺寸变化保持相对层叠关系
• 外层flex布局未针对移动端做适配，文字区块与图片容器的排版在小屏会错乱

修改后的HTML代码 #

<div class="content__stacking">
  <div class="stacking1">
    <div class="stacking2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Quos natus, corrupti vitae assumenda veritatis consectetur
        <br>debitis corporis ex odit iste voluptates rerum omnis animi ullam itaque.
        <br>Quis quam facilis facere?</p>
      <br>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        <br>Sunt unde reiciendis quod deserunt officia quos consequatur laborum ea amet quo.</p>
    </div>
  </div>
  <div class="parent">
    <img class="image1 img-responsive" src="https://placekitten.com/200/300" alt="图片1">
    <img class="image2 img-responsive" src="https://placekitten.com/200/300" alt="图片2">
  </div>
</div>

修改后的CSS代码 #

/* 基础布局 */
.content__stacking {
  display: flex;
  width: 100%;
  max-width: 1200px; /* 限制最大宽度，避免大屏拉伸过度 */
  margin: 0 auto;
  gap: 2rem; /* 用间距替代固定定位的偏移，更灵活 */
  padding: 1rem;
}

.stacking1 {
  flex: 1; /* 让文字区块占据剩余空间 */
  min-height: 370px;
  position: relative;
  background-color: #fbf9f6;
  padding: 1rem;
  display: flex;
  align-items: center; /* 垂直居中文字 */
}

.stacking2 {
  position: static; /* 移除固定定位，改为正常文档流 */
  width: 100%;
}

/* 图片层叠容器 */
.parent {
  position: relative;
  width: 200px; /* 设置图片容器基础宽度 */
  flex-shrink: 0; /* 避免图片容器被压缩 */
}

.img-responsive {
  width: 100%;
  height: auto; /* 确保图片按比例缩放 */
  display: block;
}

.image1 {
  position: relative;
  border: 1px solid #000;
}

.image2 {
  position: absolute;
  top: 15%; /* 用百分比替代固定像素，保持相对偏移 */
  left: 15%;
  border: 1px solid #000;
  z-index: 1; /* 确保第二张图片覆盖在第一张之上 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .content__stacking {
    flex-direction: column; /* 移动端改为垂直排列 */
    align-items: center;
  }

  .parent {
    width: 80%; /* 移动端放大图片容器占比 */
    margin-top: -3rem; /* 让图片向上偏移，覆盖部分文字区块 */
  }
}

关键修改说明 #

• 移除所有固定像素的绝对定位，改用flex布局分配空间，配合flex:1和flex-shrink:0实现自适应排版
• 图片层叠偏移使用百分比单位，确保在任何屏幕尺寸下都保持一致的相对覆盖关系
• 新增媒体查询，在移动端将布局改为垂直排列，调整图片容器的宽度和位置，实现移动端的层叠效果
• 给图片添加响应式类，确保图片按比例缩放，避免变形

内容的提问来源于stack exchange，提问作者Sarah