咨询：纯HTML+CSS实现带图层控制的图片块横向并排方案

用Flex布局就能完美解决静态left值的适配问题，同时保留每组图片的独立图层控制能力，具体实现如下：

核心思路 #

1. 用外层容器的Flex布局实现两个图片块的自适应并排，完全不用固定定位的left属性
2. 每组图片块用相对定位作为容器，内部图层用绝对定位叠放，基础层负责撑开容器尺寸
3. 保留每个图层的独立ID，不影响原有的JS控制逻辑

代码实现 #

HTML结构 #

<div class="book-container">
  <!-- 左侧图片组 -->
  <div class="page" id="page-left">
    <img src="left-base.jpg" class="base-layer" alt="左侧基础图">
    <img src="left-overlay1.png" class="overlay-layer" id="left-overlay-1" alt="左侧覆盖层1">
    <img src="left-overlay2.png" class="overlay-layer" id="left-overlay-2" alt="左侧覆盖层2">
  </div>
  <!-- 右侧图片组 -->
  <div class="page" id="page-right">
    <img src="right-base.jpg" class="base-layer" alt="右侧基础图">
    <img src="right-overlay1.png" class="overlay-layer" id="right-overlay-1" alt="右侧覆盖层1">
    <img src="right-overlay2.png" class="overlay-layer" id="right-overlay-2" alt="右侧覆盖层2">
  </div>
</div>

CSS样式 #

/* 外层容器：Flex实现自适应并排 */
.book-container {
  display: flex;
  /* 可选：让两个块居中对齐，根据页面需求调整 */
  justify-content: center;
  align-items: flex-start;
  gap: 10px; /* 可选：两个块之间的间隙 */
}

/* 单页容器：相对定位，尺寸由基础图撑开 */
.page {
  position: relative;
  width: fit-content;
  height: fit-content;
}

/* 基础层：取消绝对定位，负责撑开容器尺寸 */
.base-layer {
  z-index: 1;
}

/* 覆盖层：绝对定位叠在基础层上方 */
.overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* 初始可隐藏，或根据需求默认显示 */
  /* display: none; */
}

/* 可选：添加书本立体效果 */
.page {
  transform-style: preserve-3d;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

#page-left {
  transform: rotateY(6deg);
}

#page-right {
  transform: rotateY(-6deg);
}

关键说明 #

• Flex布局会自动根据每个图片块的实际尺寸调整位置，完全适配不同大小的图片，彻底摆脱静态left值的限制
• 基础层使用默认流布局（非绝对定位），确保图片块容器的宽高和基础图完全一致，覆盖层则通过绝对定位精准叠放
• 原有的JS逻辑完全兼容：直接用getElementById修改对应图层的src或display属性即可控制显示隐藏

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