Add and overlay div in nested flex-box container

[pwaksman]

I was not able to add an overlay div over nested flex-container.
The design is 3×3 grid inside an “target region”, Inside of each cell of the grid it has another 3×3 grid.

Example: https://codepen.io/anon/pen/MXLWOb

The overlay should be over the inner grid but the position absolute or relative always mess up.
Any Idea how to do it?

[Pogany]

First you may add .FlexContainer{position: relative;}
Next a few changes for the Overlay:

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

I hope it helps.

[pwaksman]

That worked like a charm! Thanks.

[Marm1992]

Well, my brother is a web designer and he has 5 years of experience in this field. I heard your post link when I gather some information for window film colorado springs sites on the internet. I found your post on this website. I tell my brother about this and I hope my brother will help you. Thank you so much for sharing this post with us.

[Author]

Posts