Add An Overlay Div Inside Nested Flex Containers (3x3 Grid) In A Specific Cell

I have a 3x3 grid with flex-box concept, inside of each cell it has another 3x3 grid. I was trying to put an Overlay over the Inner grid in one cell, but I didn't find how to do it

Solution 1:

Finally got it to work, indeed the parent container must have relative position for it to work, so there is two change, one in the FlexContainer and other in the Overlay

.FlexContainer{
    position:relative; <-- ADD THIS
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.FlexContainer .Overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(013, 130, 230, 0.5);
    cursor: not-allowed;
}

Code Pen solution https://codepen.io/anon/pen/dKaXqg

Credits to user Pogany from the css-tricks web site CSS-TRICKS thread: https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/#post-273437