定位元素z-index失效咨询：低层级CC类img为何覆盖其他元素

核心问题出在每个img都处于独立的堆叠上下文中：

• .slideshow__inner设置了position: relative，这会给每个容器创建单独的堆叠上下文
• 你给img设置的z-index仅在它所属的父容器内部生效，无法跨容器影响其他img的层级
• 三个.slideshow__inner容器本身的堆叠顺序由DOM出现顺序决定：后面的容器默认覆盖前面的，所以第三个容器里的CC img自然会在最上层，哪怕它的z-index数值更小

解决方法 #

方案1：给父容器设置z-index（推荐） #

直接调整容器的层级，让它们的堆叠顺序符合预期：

.slideshow {
  opacity: 1;
  /* overflow: hidden; */
  width: var(--width);
  height: 80%;
  margin: 2vh auto;
  /* margin: 4vh auto; */
}

.slideshow__inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* 给父容器设置层级，覆盖默认DOM顺序 */
.slideshow__inner:first-child {
  z-index: 3;
}
.slideshow__inner:nth-child(2) {
  z-index: 2;
}
.slideshow__inner:nth-child(3) {
  z-index: 1;
}

.slideshow__inner:not(.slideshow__inner--back, .slideshow__inner--front) {
  transform: scale(.95);
}

.slideshow__inner img {
  display: block;
  width: 70%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0.1px);
}

.slideshow__inner img.AA {
  /* 父容器层级生效后，这里的z-index可保留或删除 */
  /* z-index: 4; */
}

.slideshow__inner img.BB {
  top: 15%;
  left: 15%;
  /* z-index: 3; */
}

.slideshow__inner img.CC {
  top: 30%;
  left: 30%;
  /* z-index: 2; */
}

方案2：将所有img放到同一个容器中 #

如果业务允许，把三个img放在同一个.slideshow__inner里，这样它们处于同一个堆叠上下文，原有img的z-index设置就能正常生效：

<div class="slideshow">
  <div class="slideshow__inner">
    <img class="AA" src='https://cdn.pixabay.com/photo/2022/05/03/04/34/marseille-7170837_960_720.jpg'>
    <img class="BB" src='https://cdn.pixabay.com/photo/2016/01/04/06/26/wadi-rum-1120371_960_720.jpg'>
    <img class="CC" src='https://cdn.pixabay.com/photo/2022/04/21/20/49/road-7148369_960_720.jpg'>
  </div>
</div>

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