Pozicija elementov

zdravo. Že drugič objavljam v tej temi, sedaj z problemom. Imam element katerega position=relative, znotraj tega elementa pa je element z pozicijo absolute. Namen teh elementov je, da ko z miško "hoveraš" čez element se pojavi "dropwdown". Na koncu elementa bi rad postavil še footer, vendar ko vstavim footer se postavi čez prvi element, ne glede na kakšno vrednost je nastavljena pozicija footerja. Morda kdo ve, kaj delam narobe?

<section class="one-third" id="prvi" >
     <h3>Name</h3>
     <td><i id="download-icon" class="fa fa-download"></i></td>
     <p>Description</p>
     <div class="overlay">
     <a href="#" class="text">DOWNLOAD</a>
     </div>
</section>

in css:

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgb(42, 222, 98);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.one-third:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-decoration: none;
  border: 2px solid white;
  padding: 16px 16px;

}
.text:hover {
	color: rgb(42, 222, 98);
	background-color: white;
	transition: .5s ease;

Vsem elementom ki imajo dololčen kakšen position lahko doložiš z-index s katerim določiš kateri element naj bo nad katerim.