div가 div 위로 마우스를 가져갈 때 겹치다

Question

기본적으로 #about div 위에 마우스를 올려 놓으면 #notepad div가 표시되기를 바랍니다. 나는 이미이 문제를 해결했다. 이제 다음 문제는 #notepad가 나타나면 div 위에 떠오르지 않는다는 것입니다. 특정 div는 #notepad div와 겹치고 있습니다. 요컨대, 다른 div보다 #notepad div를 어떻게 표시합니까? #aboutme div 위로 마우스를 가져 가지 않으면 #notepad 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

당신은 div의 각각의 Z- 인덱스를 설정할 수 있습니다. 즉, 각각의 깊이를 설정하고 그들에게 내가 Z- 색인 첨가 따라서

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