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上时重叠

回答

相关问题