Want to make a div below another in css - html

Question

I have two div nested inside a div .content and inside I have an img.png and I want another div with some boxes in it that will be below the img.png
<div class="navBox">
/*Contact*/
</div>
<div class="navBox">
/*Expertise*/
</div>
<div class="navBox">
/*Projects*/
</div>
In addition, I tried with every possible combination with positioning, padding, margin, I did not try z-index (do not know exactly how to use it) and did not have any good result.
Thanks in advance.
*EDIT: I managed to use other distribution.
.mainBox{
position: relative;
display: flex;
width: 95%;
height: 25vh;
padding-top: 5vh;
justify-content: space-evenly;
align-items: left;
vertical-align: middle;
}
.navBox{
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
width: 20%;
height: 20vh;
text-align: center;
top: 50%;
background: transparent;
}
.navBox a:hover{
padding-top: 50%;
background: transparent;
color: var(--text-color);
text-decoration: none;
}
a:visited, a:active, a:link{
text-decoration: none;
color: var(--text-color);
}
.navBox a{
vertical-align: middle;
color: var(--text-color);
padding-top: 0.5rem;
}

Answer 1

Next time please share your code and not some screenshot, anyway here is a sample code without using the z-index
HTML
<div class="container">
<div class="your-image"> </div>
<div class="your-boxes"> </div>
</div>
CSS
.container {
display: grid;
grid-template-rows: 1 / 1;
grid-template-columns: 1 / 1;
justify-items: center;
align-items: center
}
.your-image {
background-color: red;
width: 250px;
height: 250px;
grid-area: 1 / 1 / 1 / 1;
}
.your-boxes {
background-color: green;
width: 150px;
height: 150px;
grid-area: 1 / 1 / 1 / 1;
justify-self: center;
}
Basically you create a 1x1 grid and overlap both the divs on the same column and same row.
https://codepen.io/ChrisCoder9000/pen/NWMJdBo