如何用position:absolute叠放图片且不覆盖其他区块并保持响应式

问题原因 #

当前布局失效核心来自两点：

• 设置了position: absolute的上层图片会脱离正常文档流，父容器.about-image计算高度时仅会统计相对定位的底图高度，完全不会计入上层图的占位，自然无法撑开足够高度，屏幕缩小时上层图就会溢出遮挡下方区块
• 图片未做响应式适配、叠放偏移使用固定像素值，屏幕尺寸变化时图片大小、偏移比例无法同步缩放，要么溢出容器要么叠放错位。

修改代码 #

不需要调整原有HTML结构，仅替换/新增对应CSS即可：

.container-home-about {
  padding-top: 65px;
  padding-bottom: 65px;
}

.row {
  height: 100%;
}

.about-content>p {
  font-size: 16px;
  font-weight: 400;
  color: #5d77aa;
}

.about-image {
  position: relative;
  /* 预留右侧、底部内边距，给偏移的上层图留出空间，保证父容器高度能完整包裹叠放效果 */
  padding: 0 15% 15% 0;
}

.img-bottom {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  /* 图片宽度自适应父容器，高度按原图比例自动计算，避免溢出 */
  width: 100%;
  height: auto;
  display: block;
}

.img-top {
  position: absolute;
  z-index: 1;
  /* 偏移改用百分比值，保证不同屏幕下叠放相对位置一致 */
  top: 15%;
  left: 15%;
  width: 100%;
  height: auto;
  display: block;
}

/* 移动端适配：小屏下缩小偏移比例，避免错位 */
@media (max-width: 767.98px) {
  .about-image {
    padding: 0 8% 8% 0;
    max-width: 90%;
    margin: 30px auto 0;
  }
  .img-top {
    top: 8%;
    left: 8%;
  }
}

效果说明 #

• 两张图片会随父容器宽度等比缩放，不会出现原图尺寸过大溢出容器的问题
• 父容器通过内边距预留了上层图的偏移空间，总高度会自动匹配叠放后的总高度，彻底解决上层图遮挡下方区块的问题
• 百分比偏移保证从大屏到小屏，两张图的叠放相对位置和参考效果保持一致
• 移动端断点自动调整偏移量和容器宽度，避免小屏下叠放错位、排版拥挤。

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