如何隐藏另一个元素后面的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/

我加入的z-index在CSS时regionsUnitedStatesChooseState是隐藏的。

您的regionsUnitedStatesChooseState div正在双向菜单上。如果您为两种状态添加z-index，它将始终位于侧栏之后。