CSS rotate transform导致图片兄弟叠加层hover失效问题求解

• CSS的transform属性会触发新的层叠上下文，给图片添加rotate变换后，图片所在的普通流容器层叠优先级提升，直接覆盖了未设置z-index的绝对定位overlay层
• 之前给图片设置z-index:-999未生效，是因为z-index仅对设置了非static定位的元素生效，你的图片和它的父容器默认都是static定位，z-index不生效

仅需两步操作即可解决，完全兼容移动端交互要求：

1. 给overlay层添加显式的z-index属性，保证它的层叠优先级高于图片层
2. 可选优化：添加移动端:active状态触发兼容逻辑，避免部分移动设备点击不显示overlay

修改后CSS代码 #

.relative {
  position: relative;
  height: 300px;
  width: 200px;
}

.absolute {
  color: white;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  /*默认隐藏*/
  opacity: 0;
  /* 新增：提升层叠优先级，确保不会被图片遮挡 */
  z-index: 10;
}

.absolute:hover,
.absolute:active {
  /*hover时显示，active状态适配移动端*/
  opacity: 1;
}
.rotate {
  transform: rotate(180deg);
}

可选移动端兼容JS代码 #

加在原有JS逻辑末尾即可，解决部分移动端浏览器默认不触发:active的问题：

document.body.addEventListener('touchstart', function(){});

该方案无需调整原有DOM结构，无额外性能开销，完全适配移动端触摸交互要求。

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