フレックスアイテムの子要素のZインデックス

Question

フレックスアイテムの絶対配置子要素（）をDOM内の他の要素（たとえば、ヘッダー.header）と重複させたいとします。私は、絶対配置された要素のz-indexを2に設定しています（1でも動作するはずです）。ただし、要素はフレックスコンテナ（.tags-panel）の外側のDOM要素と重複しません。実際、それは容器によって完全に切り取られている。私はDOM内の他の要素のZ-インデックスを設定していないので、ルートはスタッキングコンテキストでなければなりません。

<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が問題を解決するoverflow-y: auto;の除去、.tags-panelにoverflowプロパティの影響を受けているのです。ここでは、自動的に/ラップ.tags-panel容器の外のコンテンツを非表示になります更新フィドルhttps://jsfiddle.net/yc5xanax/

overflow-y: auto;です。