flex項目的子元素的z-index

Question

我希望flex項目（.image-container）的絕對定位子元素（.tag-preview-container）與DOM中的其他元素（例如標頭.header）重疊。我將絕對定位元素的z-index設置爲2（即使1也應該有效）。但是，該元素不會與Flex容器外部的任何DOM元素重疊（.tags-panel）。事實上，它完全被容器切斷。我沒有設置DOM中任何其他元素的z-index，所以根應該是堆棧上下文。

<div class="panel-container"> 
    <div class="header"> 

    </div> 
    <div class="tags-panel"> 
    <div class="image-container"> 
     <div class="tag-preview-container"> 
     </div> 
    </div> 
    <div class="image-container"> 

    </div> 
    <div class="image-container"> 

    </div> 
    <div class="image-container"> 

    </div> 
    </div> 
</div> 

這是SCSS代碼和這裏的JSFiddle

.panel-container { 
    width: 400px; 
    height: 400px; 
    position: relative; 
    margin: auto; 
    .header { 
    width: 100%; 
    height: 40px; 
    background-color: green; 
    } 
    .tags-panel { 
    position: absolute; 
    background-color: red; 
    top: 40px; 
    bottom: 0px; 
    width: 100%; 
    overflow-y: auto; 
    display: flex; 
    flex-flow: row wrap; 
    align-content: flex-start; 
    } 
} 

.image-container { 
    flex: 0 0 33%; 
    box-sizing: border-box; 
    border: 1px solid black; 
    margin-top: 5px; 
    margin-left: 1px; 
    height: 80px; 
    background-color: yellow; 
    position: relative; 
    .tag-preview-container { 
    background-color: black; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    width: 200px; 
    height: 200px; 
    z-index: 2; 
    opacity: 0.5; 
    } 
} 

Answer 1

的z-index在.tags-panel受overflow財產，除去overflow-y: auto;將解決這個問題。這裏是更新的小提琴https://jsfiddle.net/yc5xanax/

overflow-y: auto;將自動包裝/隱藏.tags-panel容器以外的內容。