使用CSS z-index属性后轮播图层级显示异常求助

核心问题分析 #

1. 重复ID无效：HTML中重复使用id="m"、id="img1"、id="img2"，ID在页面中必须唯一，浏览器只会识别第一个匹配元素，导致后续轮播项无法被JS获取。
2. 选择器不匹配：JS里调用getElementsByClassName("m")，但HTML容器用的是id="m"，两者不对应，轮播逻辑根本无法作用到所有容器。
3. 容器布局错误：两个#m容器默认是块级元素，会垂直排列，而非叠加在同一位置，加z-index也无法改变它们的布局流位置。

修正后的完整代码 #

HTML

<div class="m">
    <div class="img1">
        <img src="https://picsum.photos/seed/picsum/200/200" />
    </div>
    <div class="img2">
        <img width="50px" height="50px" src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs"/>
     </div>
</div>
<div class="m">
    <div class="img1">
        <img src="https://i.picsum.photos/id/933/200/200.jpg?hmac=OW5v0bUFqC97kOeYWLjXhU-5mkb6atERs7CrqdPlRfs" />
    </div>
    <div class="img2">
        <img width="50px" height="50px" src="https://picsum.photos/seed/picsum/200/200"/>
    </div>
</div>

CSS

.m {
  width: 100px;
  height: 100px;
  position: relative;
  /* 让轮播容器叠加在同一位置 */
  position: absolute;
  top: 0;
  left: 0;
}

.img1,
.img2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.img2 {
  z-index: 10;
  margin: 20px;
}

JavaScript

// 初始化索引
let imageIndex = 0;

function pp() {
  var t = document.getElementsByClassName("m");

  for (var i = 0; i < t.length; i++) {
    t[i].style.display = "none";
  }
  imageIndex++;
  if (imageIndex >= t.length) {
    imageIndex = 0;
  }

  t[imageIndex].style.display = "block";
  setTimeout(pp, 2000);
}

// 启动轮播
pp();

关键修复说明 #

• 把所有重复ID改为class，确保样式和JS能选中所有目标元素。
• 给.m容器添加position: absolute，让它们叠加在同一位置，此时z-index才能控制内部元素的堆叠顺序。
• 修正JS的索引逻辑，从0开始避免数组越界，确保轮播循环正常。

如果你提到的“红色边框”是自定义样式，只需确保边框所在元素的z-index值高于下方图片，就能让边框显示在上方。

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