z-index of child element of a flex item - html

Question

I want an absolute positioned child element (.tag-preview-container) of a flex item (.image-container) to overlap other elements in the DOM (for instance the header .header). I'm setting the z-index of the absolute positioned element to be 2 (even 1 should work). However, the element doesn't overlap any DOM element outside the flex container(.tags-panel). In fact, it is completely cut off by the container. I am not setting z-index of any other element in the DOM, so the root should be the stacking context.
<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>
This is the scss code and here's the 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

The z-index is affected by the overflow property in .tags-panel, removing overflow-y: auto; will solve the issue. Here is the updated fiddle https://jsfiddle.net/yc5xanax/
overflow-y: auto; will automatically wrap/hide the content outside the .tags-panel container.