Cara membuat div muncul di bawah div lain dalam CSS

Question

Saya mempunyai dua div yang bersarang di dalam div yang dipanggil .content. Di dalamnya saya mempunyai img.png dan saya mahukan div lain dengan beberapa kotak di dalamnya yang akan berada di bawah img.png

<div class="navBox">
            <a href="#contact">/*Maklumat hubungan*/</a>
        </div>
        <div class="navBox">
            <a href="#kepakaran">/*Kepakaran*/</a>
        </div>
        <div class="navBox">
            <a href="#projek">/*projek*/</a>
        </div>

Selain itu, saya mencuba setiap kemungkinan gabungan kedudukan, padding, margin, tetapi bukan z-index (tidak pasti cara menggunakannya) dan tidak mendapat hasil yang baik.

Terima kasih terlebih dahulu.

*Edit: Saya berjaya menggunakan kaedah pengedaran lain.

.mainBox{
    kedudukan: relatif;
    paparan: flex;
    lebar: 95%;
    ketinggian: 25vj;
    padding-top: 5vh;
    justify-content: ruang-sama rata;
    align-item: kiri;
    vertical-align: tengah;
}

.navBox{
    padding-top: 25px;
    padding-left: 10px;
    padding-kanan: 10px;
    lebar: 20%;
    ketinggian: 20vh;
    text-align: tengah;
    atas: 50%;
    latar belakang: telus;
}

.navBox a:hover{
    padding-top: 50%;
    latar belakang: telus;
    warna: var(--text-color);
    hiasan teks: tiada;
    
}

a:dilawati, a:aktif, a:pautan{
    hiasan teks: tiada;
    warna: var(--text-color);
}

.navBox a{
    vertical-align: tengah;
    warna: var(--text-color);
    bahagian atas pelapik: 0.5rem;
}

Answer 1

Lain kali sila kongsi kod anda dan bukannya tangkapan skrin, bagaimanapun, berikut adalah contoh kod tanpa menggunakan 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;
}

Pada asasnya, anda membuat grid 1x1 dan bertindih dua div pada lajur dan baris yang sama.

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