使用z-index实现图片叠加失败，寻求响应式布局解决方案

算力阿峰

2026-8-18

图片叠加实现方案

你的问题出在绝对定位的参考容器未设置相对定位，且两张图片分属不同flex子容器，gap还拉开了间距，自然无法实现叠加效果。以下是适配响应式布局的修改方案：

核心调整点

将两张图片放入同一容器，给该容器设置position: relative，作为绝对定位元素的定位基准
给上层叠加图片添加top: 0; left: 0;，使其完全覆盖下层图片
保留flex布局的居中特性，全程不使用margin类属性，避免破坏响应式结构

修改后的完整代码

CSS

body {
  background: #000000;
  height: 100vh; /* 用vh确保占满视口高度，修复原代码height属性缺分号的问题 */
  width: 100%;
  overflow: hidden;
  margin: 0; /* 清除浏览器默认边距 */
}

.mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 30px;
}

/* 图片容器，作为绝对定位的参考基准 */
.image-container {
  position: relative;
  width: fit-content; /* 自适应图片宽度，保持响应式 */
}

.neer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  /* 如需微调叠加位置，可修改top/left的百分比或像素值 */
}

/* 统一图片尺寸，避免叠加错位 */
.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

HTML

<div class="mobile">
  <p style="color: blue; font-size: 40px;">Overlay image</p>
  <div class="image-container">
    <!-- 下层基础图片 -->
    <img src="https://place-hold.it/338x280" />
    <!-- 上层叠加图片 -->
    <div class="neer">
      <img src="https://growtraffic-bc85.kxcdn.com/blog/wp-content/uploads/2019/02/336-x-280.jpg" />
    </div>
  </div>
</div>