Display an overlay to fit parent when it is a grid area - html

Question

I have a grid (containers) to display a navbar, a main-container and a footer. In the main-container, it is also a grid to display 3 children elements in a custom disposition using grid-area. Everything works properly.
Now, I would like to display an overlay div (overlay) which has to fit the whole main-container. To do so, I just add an additional div in the main-container with the property height: 100%; width: 100%; and play with the position property without success. Indeed, position: absolute or position: fixed make it too big and I don't want to set a fixed width or height since the layout can be responsive. And with position: relative, it is not working neither.
Do you have any idea, how I could make the overlay display above the main-container while keeping the properties width: 100%; height: 100%;?
#containers {
display: grid;
grid-template-areas: "navbar main" "navbar footer";
grid-template-rows: calc(100% - 32px) 32px;
grid-template-columns: 56px calc(100% - 56px);
}
#navbar-container {
grid-area: navbar;
background-color: blue;
}
#main-container {
grid-area: main;
height: 100%;
width: 100%;
display: grid;
grid-template-areas:
'child1 child2'
'child1 child3';
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
#footer-container {
grid-area: footer;
background-color: black;
}
#child1,
#child2,
#child3 {
padding: 10px;
}
#child1 {
grid-area: child1;
background-color: red;
}
#child2 {
grid-area: child2;
background-color: purple;
}
#child3 {
grid-area: child3;
background-color: pink;
}
#footer-container {
grid-area: footer;
}
.modal {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
position: absolute;
}
<div id="containers">
<div id="navbar-container"></div>
<div id="main-container">
<div id="child1">
<span>CHILD 1</span>
</div>
<div id="child2">
<span>CHILD 2</span>
</div>
<div id="child3">
<span>CHILD 3</span>
</div>
<div class="modal">
MODAL
</div>
</div>
<div id="footer-container"></div>
</div>

Answer 1

Just needed to make the parent relative and the modal absolute.
#containers {
display: grid;
grid-template-areas: "navbar main" "navbar footer";
grid-template-rows: calc(100% - 32px) 32px;
grid-template-columns: 56px calc(100% - 56px);
}
#navbar-container {
grid-area: navbar;
background-color: blue;
}
#main-container {
grid-area: main;
height: 100%;
width: 100%;
display: grid;
grid-template-areas:
'child1 child2'
'child1 child3';
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
position: relative;
}
#footer-container {
grid-area: footer;
background-color: black;
}
#child1,
#child2,
#child3 {
padding: 10px;
}
#child1 {
grid-area: child1;
background-color: red;
}
#child2 {
grid-area: child2;
background-color: purple;
}
#child3 {
grid-area: child3;
background-color: pink;
}
#footer-container {
grid-area: footer;
}
.modal {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
position: absolute;
}
<div id="containers">
<div id="navbar-container"></div>
<div id="main-container">
<div id="child1">
<span>CHILD 1</span>
</div>
<div id="child2">
<span>CHILD 2</span>
</div>
<div id="child3">
<span>CHILD 3</span>
</div>
<div class="modal">
MODAL
</div>
</div>
<div id="footer-container"></div>
</div>