Jquery菜單移位/重疊div部分圖像

我是網絡編程的新手，所以任何建議對我來說都是重要的資產。Jquery菜單移位/重疊div部分圖像

我試圖創建菜單和圖像滑動使用jquery，但該菜單重疊與鉻中的圖像和IE中的移位div部分。

結果 http://jsfiddle.net/bM9vR/3/embedded/result/

我還附上示例代碼

<html> 
<head> 
<style type="text/css" > 

body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;} 
ul, li{margin:0; padding:0; list-style:none;} 

.menu_head{border:1px solid #998675;} 
.menu_body {width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;} 
.menu_body li{background:#493e3b;} 
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;} 
.menu_body li.alt{background:#362f2d;} 
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;} 
.menu_body li a:hover{padding:15px 10px; font-weight:bold;} 
               #slideshow { 
                  margin: 50px auto; 
                  position: relative; 
                  width: auto; 
                  height: auto; 
                  padding: 10px; 
                  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
                 } 

                 #slideshow > div { 
                  position: absolute; 
                  top: 10px; 
                  left: 10px; 
                  right: 10px; 
                  bottom: 10px; 
                 } 

</style> 

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("ul.menu_body li:even").addClass("alt"); 
$('img.menu_head').click(function() { 
$('ul.menu_body').slideToggle('medium'); 
}); 

$('ul.menu_body li a').mouseover(function() { 
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50); 
}); 

$('ul.menu_body li a').mouseout(function() { 
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50); 
}); 

$(function(){ 
$("#slideshow > div:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 3000); 
}); 

});  
</script> 
</head> 
<body style="margin:auto;"> 
<div style="width:1000px; height:600px; margin:20px;"> 
<div style="width:auto; height:100px"> 

<img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQNrzbTsg60SbbpFVCI-Mt7gq6V6W3lSvFQznvZiuRUAP1Rh1pt" width="184" height="32" class="menu_head" alt="Click"/><br> 
<ul class="menu_body"> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
    <li><a href="#">AAAAAAAA</a></li> 
</ul> 
</div> 
<div style="width:auto; height:100px; background-color:white;"> 
<div id="maindiv221"> 
<div id="slideshow"> 
    <div> 
    <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRxhQOGp29MxjxwtL97VTm2lzyYYvOSLoOiMo3uWJFdBm91gMJjPvSD7Ag" alt="1"> 
    </div> 
    <div> 
    <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcQvTJ-sdmw9EjrrL7j9izN3IavFusBzfvlc_Ow9as6TNfdfvr88" alt="2"> 
    </div> 
    <div> 
    <img src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTt4CqLzoaI9ehHYZs-B1eo8X-5qoMdaiRd6juWKmoFfwrmoK8Urg" alt="3"> 
    </div> 
</div> 

</div> 
</body> 
</html>

來源

2012-08-06 Kasma

在.menu_body類的CSS中添加該代碼

z-index: 999999; 
position:relative;

菜單的Z-index必須大於其他元素。 Z指數更大的元素與我們「更接近」。檢查這個有關z-index的鏈接：http://www.w3schools.com/cssref/pr_pos_z-index.asp 注意：z-index只適用於具有非靜態位置的元素。（相對，絕對和固定位置）。

來源

2012-08-06 03:01:19

謝謝，zindex解決了我在Chrome中遇到的問題，但我無法解決IE中的問題，它將圖像轉換爲合適的菜單。（如果我將這個示例代碼添加到普通的html文件並打開該html文件。） – Kasma 2012-08-06 03:13:21

Jquery菜單移位/重疊div部分圖像

回答

相關問題