Javascript JQuery动画和z索引工作不正常

我试图使两个面板，可以打开和关闭两个按钮

当我这样做时，一切都正常：

打开红色面板

打开绿色面板

关闭红色面板

在本例中，在动画期间，红色面板隐藏在绿色后面

但当我喜欢这个的时候：

打开绿色面板

打开红色面板

关闭绿色面板

在动画期间，绿色面板始终位于红色面板的前面

但是第一个打开的面板有

z-index:9

，第二个打开的面板有

z-index:10

---

请帮我解决这个问题。

它之所以在上面是因为html。红色是在绿色之前创建的，因此使它们每次都“在”彼此下方设置动画的唯一方法是通过if语句以编程方式编辑z索引

在if语句中，只需更改z索引：

if ($messengerPanel.hasClass('open')) {
    sidebarPanelClose($messengerPanel);
    $("#green").css("z-index", "1");
} else {
    sidebarPanelOpen($messengerPanel);
    $("#green").css("z-index", "10");
}

红色也一样

更新的小提琴：

检查它是否能工作 包含在css中

 .open-first{
    z-index:-1 !important;
}
.open{
    z-index:1;
}

---

我还去掉了样式表中的z索引：）如果你想让它们在上面移动，只需在z索引css上切换1和10的值：）这就是你想要的吗？