Javascript CSS z-index无法处理父级具有transform:translate3d的元素

环境

浏览器：Chrome版本69.0.3497.92（官方版本）（64位）

组件：发现干蓝元/小滑块

背景：

我有一个使用小滑块创建的滑块。它工作得很好。同样在同一页上，我有一个覆盖整个页面的覆盖div

问题：

确切的问题是，在我的滑块上有一个元素（我称之为活动元素），应该在“覆盖”层上看到。这意味着除活动元素外，所有其他滑块项都应位于覆盖下

我正在提供覆盖图

z-index:999

和活动项

z-index:9999

。 从技术上讲，我们希望活动的数据位于覆盖层的前面。但事实并非如此

我期望得到的是：

我实际得到的是：

我知道这个问题是因为滑块使用

transform:translate3d

左右移动项目，从而取消了

z-index

我已经阅读了我在谷歌上找到的大多数解决方案，但没有运气

我在codepen上重新生成了这个问题。这里是链接。 那个问题有什么解决办法吗？谁能告诉我问题出在哪里，并在代码笔代码段中修复它

代码：

tns({
“容器”：“.base”，
“项目”：4，
自动播放：错误，
“导航”：错误，
“幻灯片”：“页面”，
“mouseDrag”：没错，
“swipeAngle”：错误，
“速度”：400
})

.overlay{
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.7）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
z指数：999；
}
.项目{
背景：#e67e22；
高度：450px；
颜色：#fff；
边框：1px实心；
}
.item.active{
z指数：9999；
背景#2c3e50；
}

项目
活动项
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
覆盖层

您可以更改覆盖，使其属于转换生成的堆叠上下文，并且可以使其上方的活动元素：

tns({
“容器”：“.base”，
“项目”：4，
自动播放：错误，
“导航”：错误，
“幻灯片”：“页面”，
“mouseDrag”：没错，
“swipeAngle”：错误，
“速度”：400
})

/*覆盖层*/
.基地：之前{
内容：“；
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.7）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
z指数：999；
}
/**/
.项目{
背景：#e67e22；
高度：450px；
颜色：#fff；
边框：1px实心；
位置：相对位置；
}
.item.active{
z指数：9999；
背景#2c3e50；
}

项目
活动项
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

您可以更改覆盖，使其属于转换生成的堆叠上下文，并且可以使其上方的活动元素：

tns({
“容器”：“.base”，
“项目”：4，
自动播放：错误，
“导航”：错误，
“幻灯片”：“页面”，
“mouseDrag”：没错，
“swipeAngle”：错误，
“速度”：400
})

/*覆盖层*/
.基地：之前{
内容：“；
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.7）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
z指数：999；
}
/**/
.项目{
背景：#e67e22；
高度：450px；
颜色：#fff；
边框：1px实心；
位置：相对位置；
}
.item.active{
z指数：9999；
背景#2c3e50；
}

项目
活动项
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

您还有另一个问题，您正在对静态元素应用z索引，而不是定位。。。如果你不能摆脱这个变换，你就没有办法去做。实际上，我的重点是在codepen上重新生成这个问题。你是对的。在我的主代码中，元素是相对定位的。应该有办法。否则，我必须更改整个系统内的滑块系统，这需要太多时间：/Your overlay高于

base

元素的堆叠顺序。因此，无论您将

活动

项放置在多高的位置，覆盖始终会更高。如果使覆盖的z索引

z

为-1，则应按预期工作。我不打算把这个作为答案，因为现在已经很晚了，所以我太累了，无法检查，可能会以300张反对票告终，哈哈@不变量更改无论添加到叠加中的z-index的值是什么，它都不会起作用，因为转换会创建一个自包含的堆叠上下文，因此您不能在其元素之间放置任何内容，除非放置的元素属于同一个堆叠context@InvariantChange啊哈。你肯定会得到500张反对票：D，因为对覆盖进行z索引-1会将覆盖放在所有项目下。不是主动的。谢谢你让我笑了顺便说一下：））你还有另一个问题，你将z-index应用于静态元素，而不是定位。。。如果你不能摆脱这个变换，你就没有办法去做。实际上，我的重点是在codepen上重新生成这个问题。你是对的。在我的主代码中，元素是相对定位的。应该有办法。否则，我必须更改整个系统内的滑块系统，这需要太多时间：/Your overlay高于

base

元素的堆叠顺序。因此，无论您将

活动

项放置在多高的位置，覆盖始终会更高。如果使覆盖的z索引

z

为-1，则应按预期工作。我不打算把这个作为答案，因为现在已经很晚了，所以我太累了，无法检查，可能会以300张反对票告终，哈哈@不变量更改无论添加到覆盖中的z索引值是什么，它都不会改变