div懸停在div上時重疊

基本上，我希望每當我將鼠標懸停在#about div上時，都會顯示#notepad div。我已經解決了這個問題。現在我的下一個問題是，當#notepad確實出現時，它不會漂浮在div上。某些div與#notepad div重疊。簡而言之，我如何讓#notepad div在其他div上出現。當我沒有將鼠標懸停在#aboutme div上時，我想讓#notepad div隱藏起來。div懸停在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:[email protected]" 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'); 
}); 
});

來源

2013-12-23 Lo_MAT

你要設置的每個的div的z-index的。，將設置的每一個的深度，並允許您到層他們相應

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

來源

2013-12-23 19:23:36

我增加的Z-index：-1;在每個div上。它確實使記事本div懸停在其他元素上。但問題是，當我在其他div上添加此代碼時，元素消失 –

Moz先生，謝謝先生。我知道了。我不知道爲什麼我把-1而不是1 = D –

沒問題！只要確保你的div有不同的z索引，你就會全部設置好。如果這有幫助，請將其標記爲答案。謝謝！ –

div懸停在div上時重疊

回答

相關問題