如何实现div层叠放置并制作响应式可缩放布局？

基础结构修正 #

你提供的初始代码存在两处会导致样式失效的问题，需要先调整：

1. 三层div共用container类名会造成样式冲突，需要区分外层容器、文本层、图片层的类名
2. 第二个内层div标签与class属性连写存在语法错误，<divclass="container">需要修正为标准标签写法

修正后的标准结构如下：

<div class="container">
  <div class="text-box">文本内容</div>
  <div class="image-box">
    <img src="实际图片地址" alt="展示图">
  </div>
</div>

目标布局参考效果

实现方案 #

采用「相对定位父容器+绝对定位子元素」的逻辑实现层叠效果，配合相对单位+比例锁定实现全尺寸自适应，无需写死固定像素值：

• 外层父容器设置相对定位，作为两个子层的定位基准，通过aspect-ratio属性锁定整体布局的宽高比，宽度随父元素自适应
• 文本层、图片层均设置绝对定位，用百分比设置偏移量和宽高，通过z-index控制层叠上下顺序
• 图片本身设置宽高100%适配父容器，配合object-fit控制显示模式，避免拉伸变形

完整样式代码 #

/* 外层定位基准容器 */
.container {
  position: relative;
  width: 90%;
  /* 按设计稿实际宽高比修改，比如设计稿宽1000高600就写 10/6 */
  aspect-ratio: 16 / 9;
  max-width: 1200px;
  margin: 32px auto;
}

/* 文本内容层 */
.text-box {
  position: absolute;
  z-index: 2;
  /* 以下偏移、宽高数值按设计稿实际比例调整即可 */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 62%;
  padding: 48px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 图片容器层 */
.image-box {
  position: absolute;
  z-index: 1;
  /* 以下偏移、宽高数值按设计稿实际比例调整即可 */
  right: 0;
  top: 10%;
  width: 52%;
  height: 80%;
}

/* 图片自适应规则 */
.image-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

兼容说明 #

如果需要兼容不支持aspect-ratio属性的低版本浏览器，可以把外层容器的aspect-ratio属性替换为padding-top比例hack，比如16:9比例对应padding-top: 56.25%，同时设置height: 0; overflow: visible;即可，实现效果完全一致。
所有偏移、宽高的百分比数值按照设计稿实际比例换算后，整体布局会随容器宽度等比缩放，所有元素的相对位置、大小比例完全还原设计稿，不会出现错位问题。

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