Javascript Z索引不工作时，强制元素位于另一个元素之上？

所以我对这个话题做了大约两个小时的研究，我发现所有的答案都太模糊了，我无法理解，或者没有回答。所以我提出了这个话题

所以我遇到的问题如下：

由于HTML/CSS的工作方式，当鼠标悬停在上方时，无法使用

z-index

将某些元素放置在彼此上方。由于这种情况，我认为我不可能修改HTML来避免这种情况。我需要3个元素在悬停在上面时相互重叠。我使用了

：hover{z-index:1000}

，但这根本没有效果。我不知道为什么

我将发布我的代码，以便您能够诊断导致此问题的原因，或者让我知道我做错了，因为z-index在这种情况下不起作用，我需要做其他事情

现在，澄清一下：Z-index在这种情况下对我不起作用，我如何才能获得同样的效果或修复某些东西使其工作，我可以使用JavaScript或jQuery来修复它吗

.banner容器{
宽度：100%；
高度：180像素；
溢出：隐藏；
}
.四列{
位置：相对位置；
左：13%；
转化：translateX（-25%）；
边框：5px实心#f2f5f8；
边界半径：6px；
}
#图像端口{
位置：绝对位置；
顶部：550px；
}
#横幅1{
位置：相对位置；
左：50%；
转化：translateX（-50%）；
宽度：自动；
身高：100%；
-webkit转换：宽度为0s，高度为0s；
/*狩猎*/
过渡：宽度为0s，高度为0s；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
z指数：0；
}
#横幅1：悬停{
位置：绝对位置；
宽度：自动；
身高：125%；
溢出：可见；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：宽度0.5s，高度0.5s；
/*狩猎*/
过渡：宽度0.5s，高度0.5s；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
z指数：1000；
利润上限：-21px；
边框：5px实心#f2f5f8；
边界半径：6px；
框大小：边框框；
}
#横幅2{
位置：相对位置；
左：50%；
转化：translateX（-50%）；
宽度：自动；
身高：100%；
-webkit转换：宽度为0s，高度为0s；
/*狩猎*/
过渡：宽度为0s，高度为0s；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
z指数：0；
}
#横幅2：悬停{
位置：绝对位置；
宽度：自动；
身高：125%；
溢出：可见；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：宽度0.5s，高度0.5s；
/*狩猎*/
过渡：宽度0.5s，高度0.5s；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
z指数：1000；
利润上限：-21px；
边框：5px实心#f2f5f8；
边界半径：6px；
框大小：边框框；
}
#横幅3{
位置：相对位置；
左：50%；
转化：translateX（-50%）；
宽度：自动；
身高：100%；
-webkit转换：宽度为0s，高度为0s；
/*狩猎*/
过渡：宽度为0s，高度为0s；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
z指数：0；
}
#横幅3：悬停{
位置：绝对位置；
宽度：自动；
身高：125%；
溢出：可见；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：宽度0.5s，高度0.5s；
/*狩猎*/
过渡：宽度0.5s，高度0.5s；
-webkit过渡计时功能：易用；
过渡时间功能：轻松进入；
z指数：1000；
利润上限：-21px；
边框：5px实心#f2f5f8；
边界半径：6px；
框大小：边框框；
}

---

对于读者来说，当鼠标悬停在上方时，图像没有上升到顶部，因为它们的母公司部门都已定位并提供了堆叠上下文。将鼠标悬停在图像上会在其父级上下文中更改其z索引，而不会更改父级本身的z位置

不使用CSS规则为父代提供堆叠上下文

.four.column{z-index:auto}

---

似乎可以解决问题。

您能用其他一些词更详细地解释这一部分吗？“悬停在上方时，我需要3个元素彼此上方”。z-index仅在元素处于相同上下文中时有效，即它不适用于浮动在相对位置上，也不适用于绝对与浮动。。。这可能是问题的原因。请尝试使用z索引和：hoverOk！当鼠标悬停在上方时，它们需要在彼此上方！还有@ryan那么我该怎么解决这个问题呢？@Turbopip谢谢！它起作用了