Two elements comes above each other in my website

The Framework I am using is called Materialize

When adding another element it somehow ends up underneath of the ones above it i never told it to underlay or position it under the cover container. I just give it a z-index to see if its truly underneath it and sure enough it is. Every time I tried to add a element it goes right underneath the cover container

    <div class="absolute">  
<div class="backgroundSettings" id="homeHero">



  <nav class="transparent adjustNav">  

   <div class="nav-wrapper">
  <a href="#" class="brand-logo left z-depth-3"><img src="images/me.jpg" class="circle meNav" id="navPic" /></a>
  <ul id="nav-mobile" class="right hide-on-med-and-down">
    <li><a class="editNav" href="...">Work</a></li>
    <li><a class="editNav" href="...">Blog</a></li>
    <li><a  href="..." class=" waves-effect waves-light btn-large blue darken-3"><i class="material-icons left">person</i>Hire Me!</a></li>
  </ul>
</div>
</nav>

<div class="centerME">
<img src="https://ibin.co/2m261AYwrczY.png"  id="logo2" class=" "/>
</div>
</div>

</div>
<div class="absolute">
<p>
Jonthue
</p>

</div>
<p>
 hi
 okkokok
</p>

https://jsfiddle.net/JonthueM/2fLm3dd8/ http://codepen.io/JonthueM/pen/yJgZBb

Solution

Here is Working Fiddle

You have applied a position:absolute to .backgroundSettings that is the reason the html content comes after this <div class='backgroundSettings'> will come beneath it, because position:absolute sets the position of html element so that it never affects any other html element comes after it or before it in its parent.

you have to use position:relative if you want divs or any html element to come side by side, edge by edge, next after previous.

Hope you understand well :)

Thanks