如何将div叠加在另一个上？

Question

所以我试图让这个下拉菜单覆盖主要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前面。