CSS translateY將動畫向下滑動到父元素的後面

Question

我試圖在您點擊標題中的鏈接時使用transformY來爲元素的向下滑動設置動畫。我遇到的問題是顯示的元素嵌套了幾個級別深，這就是我認爲導致的問題 - 我需要該元素從父元素後面向下滑動。設置z-index在這種情況下似乎不起作用。我在下面創建了一個JS小提琴 - 感謝任何幫助！在這個演示中，綠色父容器應該位於黃色隱藏元素的頂部。

jQuery('.test-link').on('click', function(e) { 
 
    e.preventDefault(); 
 
    jQuery('.container').toggleClass('active'); 
 
});

.outer-container { 
 
    background: green; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 5; 
 
} 
 

 
.container .hidden-content { 
 
    transition: all 0.2s ease; 
 
    transform: translateY(-100%); 
 
    position: absolute; 
 
    z-index: -1; 
 
    z-index: 1; 
 
    width: 100vw; 
 
    left: 0; 
 
    right: 0; 
 
    background: yellow; 
 
} 
 

 
.test-link { 
 
    margin-left: 100px; 
 
    display: block; 
 
    position: relative; 
 
    z-index: 3; 
 
    width: 200px; 
 
    background: red; 
 
} 
 

 
.container.active .hidden-content { 
 
    transform: translateY(0%); 
 
} 
 
    
 
.other-content { 
 
    position: relative; 
 
    z-index: 4; 
 
    background: blue; 
 
} 
 

 
.test-content { 
 
    position: relative; 
 
    z-index: 5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="outer-container"> 
 
    <div class="test-content"> 
 
    <div class="container"> 
 
     <a href="#" class="test-link">TEST LINK</a> 
 
     <div class="hidden-content"> 
 
     <h1>My Hidden Content</h1> 
 
     <h1>My Hidden Content</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
<div class="other-content"> 
 
<h2>This should be overlaid by the sliding out content</h2> 
 
</div> 
 
</div>

Answer 1

你可以做到這一點與負z-index

jQuery('.test-link').on('click', function(e) { 
 
    e.preventDefault(); 
 
    jQuery('.container').toggleClass('active'); 
 
});

.another-container { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.outer-container { 
 
    background: green; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.container .hidden-content { 
 
    transition: all 0.2s ease; 
 
    transform: translateY(-100%); 
 
    position: absolute; 
 
    background: yellow; 
 
    z-index: -1; 
 
} 
 

 
.test-link { 
 
    display: block; 
 
    position: relative; 
 
    width: 200px; 
 
    background: red; 
 
} 
 

 
.container.active .hidden-content { 
 
    transform: translateY(0%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="another-container"> 
 
<div class="outer-container"> 
 
    <div class="test-content"> 
 
    <div class="container"> 
 
     <a href="#" class="test-link">TEST LINK</a> 
 
     <div class="hidden-content"> 
 
     <h1>My Hidden Content</h1> 
 
     <h1>My Hidden Content</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<div>yellow box should be on top</div>