背景色能否与img设置不同z-index？图片层级叠加实现咨询

没问题，这个效果完全可以实现！咱们先梳理下你现有代码里的核心问题，再调整代码就能达到你想要的层级关系～

现有代码的问题 #

你现在把.firstimage和.background分成了两个同级<div>，而且都用了position: relative。这种情况下，它们的z-index是基于各自的文档流上下文生效的，没办法让.firstimage真正插入到.background和它内部的.secondimage之间。另外，.background用relative定位会占据文档流空间，容易导致布局错位。

修正后的代码实现 #

我们需要把所有元素放到同一个定位父容器（也就是你定义的.mainRunner）里，通过绝对定位和正确的z-index来控制层级：

CSS 代码

.mainRunner {
  position: relative;
  max-width: 1170px;
  /* 可以根据第一张图的高度设置容器高度，避免内容塌陷 */
  min-height: 399px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2e5df;
  z-index: 1;
}

.firstimage {
  position: relative;
  z-index: 2;
}

.secondimage {
  position: absolute;
  top: -75px; /* 保留你需要的偏移量 */
  left: 0;
  z-index: 3;
}

HTML 代码

<div class="mainRunner">
  <!-- 底层：背景色 -->
  <div class="background"></div>
  
  <!-- 中间层：第一张图 -->
  <div class="firstimage">
    <img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" />
  </div>
  
  <!-- 顶层：第二张图 -->
  <div class="secondimage">
    <a href="">
      <img src="" alt="" title="" />
    </a>
  </div>
</div>

关键说明 #

• 把所有元素放入.mainRunner（position: relative）后，内部子元素的z-index都会基于这个父容器计算，层级关系就明确了：background(z=1) → firstimage(z=2) → secondimage(z=3)。
• .background用position: absolute铺满父容器，既作为底层背景，又不会占据文档流空间，避免布局错乱。
• 你可以根据实际需求调整.secondimage的top/left值，实现两张图的叠加偏移效果。

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