如何实现两张图片的响应式叠加布局（支持独立动画）

想要两张独立图片保持叠加布局且响应式，核心是父容器相对定位，子图片绝对定位，这样既能脱离文档流避免布局挤压，又能让位置基于父容器缩放，不会错乱。

具体实现代码 #

CSS

.img_box {
  position: relative; /* 作为绝对定位的参考容器 */
  width: 100%; /* 占满父容器宽度，响应式核心 */
  max-width: 800px; /* 可选：限制最大宽度，避免图片过大失真 */
  margin: 0 auto; /* 可选：居中显示 */
}

.desk, .person {
  position: absolute; /* 脱离文档流，实现叠加 */
  width: 90%; /* 相对于父容器的宽度比例 */
  height: auto; /* 保持图片宽高比 */
}

.desk {
  bottom: 0; /* 固定在容器底部，替代原来的relative偏移 */
  left: 5%; /* 水平居中（100%-90%=10%，左右各5%） */
}

.person {
  bottom: 10%; /* 相对于父容器底部的距离，保持叠加位置 */
  right: 15%; /* 相对于父容器右侧的距离，对应你原来的布局 */
}

HTML

<div class="img_box">
  <img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="桌面">
  <img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="人物">
</div>

为什么这个方案可行？ #

• 父容器relative定位：为两张图片提供了统一的定位基准，所有absolute的位置计算都基于这个容器，不会随屏幕缩放偏移。
• 图片absolute定位：脱离文档流，两张图片不再互相挤压布局，彻底解决你之前用relative时的错乱问题。
• 所有尺寸/位置用百分比：缩放时相对比例完全一致，完美实现响应式。

额外优化建议 #

• 给图片加alt属性，提升可访问性。
• 如果需要动画，直接给.desk或.person加@keyframes即可，因为是独立元素，互不影响。

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