好的，所以我在网页顶部有一个导航栏，导航栏上有一个登录链接。但我有另一个登录链接，我已经设置了CSS，因此它将在导航上方，但导航栏位于其上方，即使我将其设置为z-index 444;酒吧是443
请提前感谢。
CODE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stat - Me</title>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="http://www.stat-me.com/images/sm_shortcut.jpg" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.stat-me.com/images/sm_shortcut.jpg" type="image/x-icon" />
<script src="js/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready
$(document).ready(function() {
// trigger the function when clicking on an assigned element
$(".toggle").click(function () {
// check the visibility of the next element in the DOM
if ($(this).next().is(":hidden")) {
$(this).next().show(); // slide it down
} else {
$(this).next().hide(); // hide it
}
});
});
</script>
<style type="text/css">
<!--
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color: #F00;
}
a:visited {
/* Applies to all visited links */
text-decoration: none;
color: #F00;
}
a:hover {
/* Applies to links under the pointer */
text-decoration: underline;
color: #F00;
}
a:active {
/* Applies to activated links */
text-decoration: underline;
color: #282828;
}
img{
border-style:none;
}
.topbar {
background-color: #282828;
height: 45px;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index:auto;
}
.bottombar {
background-color: #282828;
height: 45px;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
/*margin-bottom:5px; */
z-index:443;
/*padding-bottom: 20px;*/
}
.login {
color: #F00;
text-align:center;
}
.hiddenDiv{
display:none;
height: 22.5px;
width: auto;
position: fixed;
bottom: 44px;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
z-index:443;
}
#news_feed_img{
height: 25px;
width: auto;
position: fixed;
right: 0px;
bottom: 47px;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
/*margin-bottom:5px; */
z-index:443;
/*padding-bottom: 20px;*/
}
/* BELOW CSS BELONGS TO LOG IN JQ */
.secondehiddendiv{
display:none;
margin-top:40px;
margin-left:500px;
z-index:443;
}
.chat-bubble {
background-color:#242424;
border:2px solid #F00;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:217px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
border-color: transparent transparent #F00 transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:163px;
left:179px;
}
.chat-bubble-arrow {
border-color: transparent transparent #242424 transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:160px;
left:179px;
}
.log_in_img{
margin-left:117px;
}
/*END OF LOG IN CSS*/
span{
display:block;
z-index:444;
}
-->
</style>
</head>
<body bgcolor="#FF8C8C">
<div class="topbar">
<table width="100%">
<tr>
<td width="50%">
<a href="http://www.stat-me.com/"><img src="http://www.stat-me.com/images/logo_bar.png" alt="Stat-Me.com" width="202" height="45" /></a>
</td>
<td width="19%"> </td>
<td width="11%" class="login"><a href="#">LOG IN</a></td>
<td width="20%"><table align="right" cellpadding="5" cellspacing="5">
<tr>
<form action="http://www.stat-me.com/member_search.php" method="post" name="main-search" id="main-search">
<td><input name="searchb" type="hidden" value="true" />
<input type="text" name="search" size="22" value="" /></td>
<td><input type="image" src="http://www.stat-me.com/images/search_mag.png" alt="search" /></td>
</form>
</tr>
</table></td>
</tr>
</table>
</div>
<div align="center">
<img src="images/INDEX-QUESTIONARE.png" border="0" align="middle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="23,143,385,384" href="fregister.php" alt="click here to register" />
<area shape="rect" coords="432,142,781,391" href="fabout.php" alt="What is stat me . com" />
</map>
</div>
<div class="bottombar">
<div align="center" style="color:#F00"><p>
© Stat-Me.com Copyright 2010. All Rights Reserverd.
</p></div>
</div>
<span class="toggle" style="margin-top:-570px; margin-left:500px;">
<a href="#">LOG IN</a>
</span>
<div class="secondehiddendiv">
<div class="chat-bubble">
<h1 style="color:#F00">LOG IN!</h1>
<form name="login" method="post" action="scripts/login_parse.php">
<table style="margin-left:-5px; text-align:right; color:#F00;">
<tr>
<td>Email:</td>
<td><input name="email" type="text" size="17" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="pword" type="text" size="17" /></td>
</tr>
</table>
<div class="log_in_img">
<input type="image" src="http://www.stat-me.com/images/log_in_jq.png" alt="LOG IN" />
</div>
</form>
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
</div>
<span class="toggle" style="margin-left:40%; margin-bottom:30%;">
<div id="news_feed_img">
<a href="#" style="cursor:pointer;">
<img src="http://www.stat-me.com/images/bar_news_feed.png" alt="News Feed" width="98" />
</a>
</div>
</span>
<div class="hiddenDiv" style="border-top:#F00 3px solid; border-left:#F00 3px solid; border-right:#F00 3px solid; border-bottom:#F00 3px solid; background-color:#484848; width:92.2%;">
<table width="90%">
<tr>
<td>
<marquee scrolldelay="157"><font color="#FF0000"><b>June 21 - 12:00 AM - PM Messaging Re-Enabled! ...June 17 - 12:00 AM - New LOOK !!!! ...April 21 - 12:00 AM - FRIENDS FUNCTIONALITY WORKING ! ...April 21 - 12:00 AM - PM MESSAGING NOW AVALIBLE ! </b></font></marquee>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：17)
您是否尝试将position:relative添加到z-index:444;（范围）的元素中？您也可以尝试将其应用于父元素，以抵消具有相同或更高堆叠顺序的任何兄弟元素。