Comment faire apparaître un div sous un autre div en CSS

Question

J'ai deux div imbriqués dans un div appelé .content. Dedans, j'ai un img.png et je veux un autre div avec quelques cases à l'intérieur qui seront en dessous du img.png

<div class="navBox">
            <a href="#contact">/*Coordonnées*/</a>
        </div>
        <div class="navBox">
            <a href="#expertise">/*Expertise*/</a>
        </div>
        <div class="navBox">
            <a href="#projets">/*projets*/</a>
        </div>

De plus, j'ai essayé toutes les combinaisons possibles de positionnement, de remplissage, de marges, mais pas d'index z (je ne sais pas comment l'utiliser) et je n'ai pas obtenu de bons résultats.

Merci d'avance.

*Edit : j'ai réussi à utiliser d'autres méthodes de distribution.

.mainBox{
    position : relative ;
    affichage : flexible ;
    largeur : 95 % ;
    hauteur : 25vh ;
    rembourrage supérieur : 5vh ;
    justifier-contenu : espacer uniformément ;
    aligner les éléments : gauche ;
    alignement vertical : milieu ;
}

.navBox{
    rembourrage supérieur : 25 px ;
    remplissage à gauche : 10 px ;
    remplissage à droite : 10 px ;
    largeur : 20 % ;
    hauteur : 20vh ;
    alignement du texte : centre ;
    haut : 50 % ;
    fond : transparent ;
}

.navBox a:survol{
    rembourrage supérieur : 50 % ;
    fond : transparent ;
    couleur: var(--text-color);
    décoration de texte : aucune ;
    
}

a:visité, a:actif, a:lien{
    décoration de texte : aucune ;
    couleur: var(--text-color);
}

.navBox un{
    alignement vertical : milieu ;
    couleur: var(--text-color);
    rembourrage supérieur : 0,5 rem ;
}

Answer 1

La prochaine fois, partagez votre code au lieu de captures d'écran. Quoi qu'il en soit, voici un exemple de code sans utiliser z-index

HTML

<div class="container">
  <div class="your-image">&nbsp;</div>
  <div class="your-boxes">&nbsp;</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;
}

Fondamentalement, vous créez une grille 1x1 et superposez deux divs sur la même colonne et la même ligne.

https://codepen.io/ChrisCoder9000/pen/NWMJdBo