如何隱藏另一個元素後面的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，它將始終位於側欄之後。