CSS定位問題

我試圖讓這個jQuery在所有時間下拉欄在最前面。我遇到的是在這裏使用jQuery innerfade特定頁面的麻煩：http://ithacacigars.com/cigars.php 出於某種原因，是圖像背後滑動。CSS定位問題

<?php include('perch/runtime.php'); ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
Design by Davey Whitney 
[email protected] 
--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<link rel="stylesheet" type="text/css" href="http://ithacacigars.com/style.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="http://ithacacigars.com/navstyle.css" media="screen" /> 
<title>Ithaca Cigars</title> 

<script type="text/javascript" src="http://ithacacigars.com/js/jquery.js"></script> 
<script type="text/javascript" src="http://ithacacigars.com/js/jquery.innerfade.js"></script> 
<script type="text/javascript"> 
     $(document).ready(
       function(){ 

        $('.ciglog').innerfade({ 
         speed: 1000, 
         timeout: 5000, 
         type: 'sequence', 

        }); 
      }); 
</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); 
    }); 
}); 
</script> 

<script language="javascript"> 
image1 = new Image(); 
image1.src = "http://ithacacigars.com/images/homeon.png"; 

image2 = new Image(); 
image2.src = "http://ithacacigars.com/images/newon.png"; 

image3 = new Image(); 
image3.src = "http://ithacacigars.com/images/contacton.png"; 

image4 = new Image(); 
image4.src = "http://ithacacigars.com/images/navigateon.png"; 
</script> 

</head> 

<body> 
<div id="wrapper"> 

<div id="column"> 
    <div id="header"> 
     <img src="http://ithacacigars.com/images/header.png" /> 
    </div> 
    <div id="content"> 
     <div id="nav"> 
     <div class="container"> 

<a href="http://ithacacigars.com/" onmouseover="image1.src='http://ithacacigars.com/images/homeon.png';" 
onmouseout="image1.src='http://ithacacigars.com/images/home.png';"> 
<img name="image1" src="http://ithacacigars.com/images/home.png"></a> 

<a href="http://ithacacigars.com/whatsnew.php" onmouseover="image2.src='http://ithacacigars.com/images/newon.png';" 
onmouseout="image2.src='http://ithacacigars.com/images/new.png';"> 
<img name="image2" src="http://ithacacigars.com/images/new.png"></a> 

<a href="http://ithacacigars.com/contact.php" onmouseover="image3.src='http://ithacacigars.com/images/contacton.png';" 
onmouseout="image3.src='http://ithacacigars.com/images/contact.png';"> 
<img name="image3" src="http://ithacacigars.com/images/contact.png"></a> 

<img src="http://ithacacigars.com/images/navigate.png" width="184" height="32" class="menu_head" /> 
<ul class="menu_body"> 
<li><a href="http://ithacacigars.com/cigars.php">Cigars</a></li> 
<li><a href="http://ithacacigars.com/pipe.php">Pipe Tobacco</a></li> 
<li><a href="http://ithacacigars.com/roll.php">Roll Your Own</a></li> 
<li><a href="http://ithacacigars.com/acessories.php">Acessories</a></li> 
</ul> 
    </div> 

</div> 
    <div id="client"> 
     <ul class="ciglog"> 
       <li><img src="http://ithacacigars.com/images/cigarbarone.png" /></li> 
       <li><img src="http://ithacacigars.com/images/cigarbartwo.png" /></li> 
       <li><img src="http://ithacacigars.com/images/cigarbarthree.png" /></li> 
       <li><img src="http://ithacacigars.com/images/cigarbarfour.png" /></li> 
     </ul> 
     <p class="cigarlist"> 
     <?php perch_content('Cigars'); ?> 
     </p> 
    </div> 
</div> 
</div> 
</div> 

<div id="footer"> 
</div> 
</body> 

</html>

這裏是CSS的一切，但下拉：

html, body { 
    background-color:#1C130B; 
} 

a { 
    text-decoration:none; 
} 

#wrapper { 
    margin:0 auto; 
} 

#column { 
    margin:0 auto; 
    width:790px; 
} 

#header { 

} 

#nav { 
    margin:0 0 0 20px; 
    width:770px; 
    height:35px; 
} 

.newbutton { 
    float:right; 
    width:130px; 
} 

#content { 
    background-image:url('http://ithacacigars.com/images/contentbox.png'); 
    background-repeat:no-repeat; 
    width:770px; 
    height:770px; 
    margin:40px 0 0 0; 

} 

#client { 
    width:700px; 
    height:550px; 
    margin:20px 0 0 30px; 
    font-weight: bold; 
} 

#portfolio .innerfade li img { 
    margin:0 0 0 120px; 
    height:350px; 
} 

#talk img{ 
    margin:20px 25px 0 0; 
} 

p .cigarlist { 
    width:350px; 
    height:550px; 
    font-weight:bold; 
    float:left; 
} 


.ciglog { 
    width:350px; 
    height:350px; 
    float:right; 
    position:relative; 
    display:block; 
} 

#footer { 
    width:100%; 
    height:200px; 
    background-color:#AE401E; 
}

CSS的下拉菜單：

@charset "utf-8"; 
/* CSS Document */ 


ul, li{margin:0; padding:0; list-style:none;} 

.container img { 
    border:1px solid #998675; 
} 

.menu_head{border:1px solid #998675; margin:0 0 0 200px;} 

.menu_body {position:absolute; margin:0 0 0 553px; display:none; 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.alt{background:#362f2d;} 
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;} 
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}

任何幫助將不勝感激！

來源

2010-02-09 Davey

套裝menu_body類的z-index比4

來源

2010-02-09 21:14:30

這似乎已經做到了！謝謝您的幫助。 – Davey 2010-02-09 21:44:45

您是否嘗試過加入的z-index到要在上面的項目更大的值？

來源

2010-02-09 21:15:09 mythz

如果您轉到他鏈接的頁面，您會注意到他爲淡入淡出的圖像設置了z-index，這將強制它們放在靜態內容之上。 – 2010-02-09 21:18:38

我沒有爲淡入淡出的圖像設置z-index。 – Davey 2010-02-09 21:44:22

CSS定位問題

回答

相關問題