Javascript CSS translateY，用于设置父元素后面向下滑动的动画

我尝试使用transformY来设置当您单击标题中的链接时元素向下滑动的动画。我遇到的问题是，显示的元素嵌套了几层，我认为这就是造成问题的原因——我需要元素从父元素后面向下滑动。在这种情况下，设置z索引似乎不起作用。我在下面创建了一个JS小提琴-感谢您的帮助！在这个演示中，绿色的父容器应该位于黄色隐藏元素的顶部

jQuery（'.test link'）。在（'click'，函数（e）上{
e、 预防默认值（）；
jQuery（'.container'）.toggleClass（'active'）；
});
。外部容器{
背景：绿色；
宽度：100%；
位置：相对位置；
z指数：5；
}
.container.隐藏的内容{
过渡：所有0.2秒缓解；
转换：translateY（-100%）；
位置：绝对位置；
z指数：-1；
z指数：1；
宽度：100vw；
左：0；
右：0；
背景：黄色；
}
.测试链接{
左边距：100px；
显示：块；
位置：相对位置；
z指数：3；
宽度：200px；
背景：红色；
}
.container.active.隐藏内容{
转化：translateY（0%）；
}
.其他内容{
位置：相对位置；
z指数：4；
背景：蓝色；
}
.测试内容{
位置：相对位置；
z指数：5；
}

我的隐藏内容
我的隐藏内容
这应该由滑出内容覆盖
您可以使用负的
z索引来实现这一点


jQuery（'.test link'）。在（'click'，函数（e）上{
e、 预防默认值（）；
jQuery（'.container'）.toggleClass（'active'）；
});
。另一个容器{
位置：相对位置；
z指数：1；
}
.外容器{
背景：绿色；
宽度：100%；
位置：相对位置；
}
.container.隐藏的内容{
过渡：所有0.2秒缓解；
转换：translateY（-100%）；
位置：绝对位置；
背景：黄色；
z指数：-1；
}
.测试链接{
显示：块；
位置：相对位置；
宽度：200px；
背景：红色；
}
.container.active.隐藏内容{
转化：translateY（0%）；
}

我的隐藏内容
我的隐藏内容
黄色框应位于顶部
谢谢-使用-1 z-index的问题是，一旦内容滑出页面，内容将位于页面上其他元素的下方。回想起来，我的例子可能太简单了。@tomphilps不一定。您可以在所有这些内容周围引入另一个包装器，您希望该内容滑到下面，并给该包装器一个正的z索引，以便它位于其后的任何内容之上。用一个例子更新了我的答案，因为这很难解释：）我同意你的观点，不过（同样，我过于简单的例子没有很好地表达这一点）添加相对于父容器的位置会产生连锁反应，因为我的100vw宽隐藏元素正在从现在的相对父容器偏移。我将更新代码片段以正确显示这一点。