How to get a div overlapping another - html

Question

<header>
<div>
<h1>Midorikawa's Site</h1>
<hr />
<!--<p>Work in progress</p>-->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>
the "wallpaper" div has to go underneath the other div the "wallpaper" div is javascript activated and switches wallpaper with an fade but i have no idea how to get it underneath the other div please help

Answer 1

Use position: absolute on the first div:
Refer code:
<header>
<div class="content">
<h1>Midorikawa's Site</h1>
<hr />
<!--<p>Work in progress</p>-->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper"></div><!-- THIS div has to go underneath the other div -->
</header>
CSS
.content {
position: absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.body {
position: relative;
}

Answer 2

Use position: absolute; on both children of <header>.
Use positive z-index on the div you want on top.
jsFiddle: https://jsfiddle.net/sukritchhabra/89f1est4/

Answer 3

Use css property z-index on your divs. The one which you need on top should have higher z-index than the one that should be underneath it (I coloured the divs for visual).
<div style="position:absolute">
<h1>Midorikawa's Site</h1>
<hr />
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Blog</li>
<li>Quote</li>
<li>Photographs</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="wallpaper" style="width:50px;height:100px;background-color:red;z- index:-5"></div>