flex容器内div的hover平移效果失效问题求解

核心是flex布局的堆叠上下文创建规则和负z-index逻辑产生了冲突，并非hover位移动画属性本身失效：

• 普通文档流场景下，设置了z-index: -1的.box是inline-block元素，没有触发独立堆叠上下文创建条件，z-index值相对于根堆叠上下文计算，内部的子元素.box2层级高于父元素，可以正常接收鼠标hover事件，位移效果正常触发。
• 给body添加display: flex后，.box作为flex容器的直接子元素（flex项目），会自动创建独立的堆叠上下文。此时.box上设置的z-index: -1会让整个.box连同其内部所有子元素（包括.box2）一起被放置到flex容器（body）的堆叠层级之下。
• 被压在body下方的.box2无法接收到鼠标hover事件，视觉上就表现为hover位移动效完全失效。

两种改法任选其一即可：

• 移除.box上的z-index: -1属性，改为给上层的.box2设置正z-index值（比如z-index: 1）实现层级差，不需要把父元素放到负层级。
• 保留原有z-index写法的话，给设置了display: flex的body添加position: relative; z-index: 0;，让flex容器自身创建独立堆叠上下文，避免子元素整体被压到容器层级下方。

修复后可运行代码示例 #

body {
  padding: 100px;
  margin: 0;
  display: flex;
  gap: 12px;
  /* 堆叠上下文修正 */
  position: relative;
  z-index: 0;
}

.box {
  width: 200px;
  height: 200px;
  background-color: black;
  border: solid 2px black;
  border-radius: 15px;
  z-index: -1;
}

.box2 {
  position: relative;
  width: 200px;
  height: 200px;
  left: 2px;
  bottom: 5px;
  background-color: white;
  border: solid 2px black;
  border-radius: 15px;
  /* 可选：添加过渡让动效更自然 */
  transition: all 0.2s ease;
}

.box2:hover {
  bottom: 8px;
  left: 4px;
}

<body>
  <div class="box">
    <div class="box2">
    </div>
  </div>
  <div class="box">
    <div class="box2">
    </div>
  </div>
</body>

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