CSS transform:rotate导致自定义光标始终覆盖导航栏问题求助

这个问题我之前也踩过坑！根源在于你给光标容器加的transform: rotate(180deg)会创建一个新的堆叠上下文，这直接打破了你原本设置的z-index层级规则，导致导航栏的z-index再高也没用。

为什么会这样？ #

当元素应用了非none值的transform属性时，浏览器会自动为该元素创建一个独立的堆叠上下文。在这个新的上下文里，元素的z-index只在内部生效——也就是说，你的光标现在相当于“自成一派”，外部的导航栏哪怕z-index设得更高，也无法覆盖它。而你移除rotate后，光标容器没有创建新的堆叠上下文，z-index的层级关系就恢复正常了。

最简单的解决方案：把旋转效果移到内部元素上 #

不要直接给光标容器加transform，而是把旋转应用到光标内部的图片（或背景载体）上，这样光标容器本身不会创建堆叠上下文，z-index就能正常生效了。

代码示例（假设光标是<div id="cursor"><img src="cursor.png"></div>）：

.head1 { /* navbar */
  position: fixed;
  min-width: 100%;
  margin-top: 3rem;
  z-index: 14;
}

#cursor { /* cursor容器 */
  margin-top: -48px;
  z-index: 13; /* 设为比导航栏小的值 */
  /* 这里不要加transform！ */
}

#cursor img { /* 把旋转应用到内部图片 */
  transform: rotate(180deg);
}

如果是用背景图实现的光标：

可以用伪元素承载背景图，然后给伪元素加旋转，确保光标容器本身没有transform：

.head1 {
  position: fixed;
  min-width: 100%;
  margin-top: 3rem;
  z-index: 14;
}

#cursor {
  margin-top: -48px;
  z-index: 13;
  position: relative; /* 让伪元素相对它定位 */
  width: 你的光标宽度;
  height: 你的光标高度;
}

#cursor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的光标图片路径');
  background-size: cover;
  transform: rotate(180deg); /* 旋转伪元素而不是容器 */
}

原理验证 #

这样修改后，光标容器不再创建新的堆叠上下文，它的z-index（13）会和导航栏的z-index（14）处于同一个层级体系中，导航栏自然就能显示在光标上方了。

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