div overlapping when hover over divs

Question

SO basically, I want the #notepad div to appear whenever I hover over #about me div. I already solved this issue. Now my next issue is, that when the #notepad does appear, it doesn't float over the divs. Certain divs are overlapping with the #notepad div. In a nutshell, how do I make the #notepad div appear OVER the other divs. And I want the #notepad div to hide back when I am not hover over #aboutme div.

        <div id="picture">
            <img src="http://m.c.lnkd.licdn.com/media/p/3/005/02c/2e1/0373b9e.jpg"                    height="80" width="80" id="linkimg"/>
    </div>

    <div>
        <div id="aboutme"><span id="abtext">ABOUT ME</span></div>
    <div>
    <div id="notepad" style="display:none">
        <p>
            <ul>
            <li>Guitar Aficionado</li>
            <li>Travel Enthusiast</li>
            <li>Aspiring Entrepreneur</li>
            <li>Fitness Fanatic</li>
            <li>Web Geek</li>
            <li>Avid Writer</li>
            <li>Avid Reader</li>
            </ul>
        </p>
    </div>




    <div>
        <a href="http://www.linkedin.com/in/lorenzomatibag/">
        <img src="http://www.sugarspunmarketing.com/wp-content/uploads/2013/08/Linkedin-logo-icon.png" id="linkedin"></a>
    </div>

    <div id="gmail">
    <a href="mailto:lorenzo0526@gmail.com" id="email" style="margin-left:6px>EMAIL</a>                  
    </div>

<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_wtthout_text_md.png" height="23" width="23"class="button">
            </form>
        </div>
    </div>

CSS:

#aboutme {position:fixed;
top:110px;
left:14px;
border: 2px solid black;
border-radius:10px;
background-color:#494545;
height:30px;
width:133px;
opacity:.5
}
#aboutme:hover {
opacity:1.0;
filter:alpha(opacity=100); 
}

#abtext {position:relative;
top:2px;
font-family:Broadway;
font-size:22px;
padding-left:3px;
color:white;
}

#notepad{background:url(http://s25.postimg.org/6cgzfumb1/lined_paper_by_LL_stock.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border: 2px solid black;
    border-radius:10px;
    position:relative;
    height:380px;
    width:360px;
       }

ul {
font-family:Comic Sans MS;
font-size:28px;
list-style-type: none;
}

#picture {background-color:black;
background-size: cover;
height: 86px;
position:fixed;
top: 14px;
left: 14px;
border-style:dashed; 
border-color: #2E2E2E;
border-radius: 10px;
opacity:1;
filter:alpha(opacity=40);
word-wrap: break-word;
width: 133px;
color:#8A0808;
}
#linkimg {position:relative;
top:1px;
left:1px;
border:2px solid black;
border-radius: 10px;
}

#linkedin {position: fixed;
    top: 18px;
    left: 104px;
    width:40px;
    height: 40px;
    opacity:.7;
    border:2px solid black;
    border-radius:10px;
    filter:alpha(opacity=40);
    }

#linkedin:hover
{
opacity:1.0;
filter:alpha(opacity=100); 
}

#gmail {background-color:#880303;
    border-radius:10px;
    border:4px solid #6E6E6E;
    text-align:center;
    letter-spacing:10px;
    position: fixed;
    top: 147px;
    left: 14px;
    width: 133px;
    height: 25px;
    opacity:.6;
    filter:alpha(opacity=40);
    }
#gmail:hover
{
opacity:1.0;
filter:alpha(opacity=100); 
}
#email {
text-decoration: none;
color: White;
font-size:18px;
font-family:Showcard Gothic;}

.search{position:fixed;
    height:32px;
    width:138px;
    top:183px;
    left:14px;
    border:1px solid black;
    background-color:black;
    border-radius:10px;
    opacity:.8;}
.search_text{position:relative;
    bottom:2px;
    width:99px;
    left:1px;
-moz-border-radius: 15px;
border-radius: 8px;
border:solid 1px black;
padding:5px; 
text-align:center;
}
.button{position:relative;
    top:6px;
    right:3px;}

jQuery:

$(document).ready(function() {
$('#NEW').delay(250).fadeIn(1000);
$('#MEDIA').delay(850).fadeIn(1000);
$('#NEWB').delay(1600).fadeIn(1000);
$("#aboutme").mouseover(function() {
$("#notepad").show('slow');
});
});

Answer 1

You'll want to set the z-index of each of the divs. That will set the depth of each one and allow you to layer them accordingly

http://www.w3schools.com/cssref/pr_pos_z-index.asp