堆叠Div平移层级异常求助：hover时后续Div显示不符合预期

看起来你遇到的核心问题是嵌套容器的z-index管理混乱，加上悬停时的层级调整逻辑没跟上，导致Div移动时出现层级跳变。咱们一步步来修复：

问题根源分析 #

• 嵌套的pileone/piletwo容器自带z-index:8，会覆盖内部Div的层级设置，移动时直接打乱了原本的堆叠关系。
• 悬停时给移动容器设置的z-index值（比如z-index:1）比部分Div的默认z-index还低，自然会跑到下方。
• 嵌套的相邻兄弟选择器写法太复杂，不利于统一控制后续元素的状态。

修复方案 #

1. 简化HTML结构 #

把所有Div放在同一个父容器里，去掉嵌套的pile容器，让层级关系更清晰：

<div id="portfolio">
  <div class="stacked-div" id="numberOne"></div>
  <div class="stacked-div" id="numberTwo"></div>
  <div class="stacked-div" id="numberThree"></div>
  <div class="stacked-div" id="numberFour"></div>
  <div class="stacked-div" id="numberFive"></div>
  <div class="stacked-div" id="numberSix"></div>
</div>

2. 统一CSS样式与层级控制 #

• 给所有堆叠Div加统一类.stacked-div，减少重复代码。
• 让后续Div的z-index依次递增，确保后面的元素默认就在前面元素的上方。
• 用通用兄弟选择器~实现“悬停某个Div时，所有后续兄弟Div平移”的效果，不用逐个写嵌套选择器。
• 移除多余的容器z-index，只控制Div本身的层级。

修改后的CSS：

#portfolio {
  position: relative; /* 让内部绝对定位元素以它为基准 */
  margin-top: 30px;
}

.stacked-div {
  height: 500px;
  min-width: 300px;
  border-radius: 16px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  position: absolute; /* 绝对定位实现堆叠 */
  transition: all 1s ease-in;
}

/* 初始堆叠位置：每个后续Div向左偏移150px */
#numberOne { left: 10px; z-index: 1; }
#numberTwo { left: -140px; z-index: 2; }
#numberThree { left: -290px; z-index: 3; }
#numberFour { left: -440px; z-index: 4; }
#numberFive { left: -590px; z-index: 5; }
#numberSix { left: -740px; z-index: 6; }

/* 悬停触发后续元素平移 */
#numberOne:hover ~ .stacked-div {
  transform: translateX(150px);
}
#numberTwo:hover ~ .stacked-div {
  transform: translateX(150px);
}
#numberThree:hover ~ .stacked-div {
  transform: translateX(150px);
}
#numberFour:hover ~ .stacked-div {
  transform: translateX(150px);
}
#numberFive:hover ~ #numberSix {
  transform: translateX(150px);
}

3. 关键改动说明 #

• 绝对定位：代替相对定位的嵌套偏移，让所有Div直接基于父容器定位，避免嵌套容器带来的层级干扰。
• 递增z-index：默认让后面的Divz-index更高，移动时始终保持在前面Div的上方，不会出现“跑到下面”的情况。
• 通用兄弟选择器：简化了悬停触发逻辑，不用嵌套容器就能轻松控制后续所有元素的状态。

这样修改后，当你悬停任意一个Div时，后续所有Div会平滑向右移动150px，并且始终保持在前面Div的上方，层级跳变的问题就解决了。

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