如何用两种方式将css过渡隐藏在另一个元素后面

Question

在下面的示例中，我将向您展示我现在的示例，您将注意到当您单击黑框时，另一个更大的黑框将从我的侧边栏下方弹出!虽然在jsfiddle中很难分辨，但在浏览器中非常明显，但是在z-index的帮助下，我设法让窗口从侧边栏下方正确滑出，但是当您再次单击它以发送框时，它会在侧边栏上方而不是回到下面。我试过一些简单的东西，但都没有效果!请帮帮我!:)

HTML

<div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState"></div>
</div>

CSS

#sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left:-60px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background: #000;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background: #555;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #000;
    top:0;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}

jQuery

$(function() {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
$(function() {
    $("#regionsUnitedStates").on("click", function() {
        $("#regionsUnitedStatesChooseState").toggleClass("show");
        $("#regionsUnitedStates").toggleClass("not-open");
    });
});

的例子:

JSFIDDLE

Answer 1

我已经更新了你的小提琴http://jsfiddle.net/z35LQ/1/

当regionsUnitedStatesChooseState被隐藏时，我在CSS中添加了z-index

您的regionsUnitedStatesChooseStatediv在两个方向上都在侧边菜单上。如果你为两种状态都添加了z-index它总是会在侧边栏后面。