<p>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</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>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. </p> <p>Merci d'avance. </p> <p>*Edit : j'ai réussi à utiliser d'autres méthodes de distribution. </p> <pre class="brush:php;toolbar:false;">.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 ; }</pre></p>

<div class="container">
  <div class="your-image">&nbsp;</div>
  <div class="your-boxes">&nbsp;</div>
</div>

.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;
}