Как я могу наложить один div поверх другого?

Итак, я пытаюсь сделать так, чтобы это раскрывающееся меню перекрывало основной div, поскольку оно застряло за ним.

код выпадающего меню:

 `<div id = "navbar-wrap" class = "animated fadeInLeftBig">
  <nav>
    <ul> 
        <li><button> N/A </button></li>
        <li><button> N/A </button></li>
        <li><button> N/A </button></li>
        <li><button> N/A </button></li>
    <div class = "dropdown">
        <li><button class = "dropbtn">Recruitment</button></li>
        <div class = "drop-content">
            <a href = "#"> Apply Now! </a>
            <a href = "#"> Our Team </a>
            <a href = "#"> About Us </a>
            <a href = "#"> Contact Us </a>
        </div>
        </div>
    </ul>
</nav>
</div>`

стиль раскрывающегося списка:

`dropdown {
position: relative;
display: inline-block;
}

.drop-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
z-index: 5 !important;
}`

основной код div:

   `<div id = "main-wrap" class = "animated fadeIn">
    <main>
    <h1 id = "title-one"> Recruitment <h1>
    <p>  </p>
    <img src = "interview.jpeg" alt = "recruitment" id = "img-one"/>
    </main>
    </div>`

не уверен, почему он появляется перед основным div.