个人中心
gpt4 book ai didi

css - Z-INDEX 帮助将链接置于最前面

转载 作者：行者123 更新时间：2023-11-28 08:59:55 25 4
gpt4 key购买 nike

好的，我在网页顶部有一个导航栏，在导航栏上有一个登录链接。但我有另一个登录链接，我已经设置了 css，以便它完全位于导航上方，但导航栏位于它上方，即使我将其设置为 z-index 444；酒吧是 443

请提前致谢。

代码:

<!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%">&nbsp;</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>      
      &copy; 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 !&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...April 21 - 12:00 AM -  PM MESSAGING NOW AVALIBLE !&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font></marquee>
    </td>
  </tr>
</table>

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

最佳答案

您是否尝试将 position:relative 添加到具有 z-index:444; 的元素(跨度)？您也可以尝试将它应用于父元素，以抵消具有相同或更大堆叠顺序的任何兄弟元素。

关于css - Z-INDEX 帮助将链接置于最前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3105219/

25 4 0
文章推荐： css - 如何在css中定义输入文本间距
文章推荐： javascript - AJAX responseXML 为空，带有 jQ​​uery UI 模态表单
文章推荐： javascript - 如何使用 jQuery 将一个 html 文档引用到 div 中的另一个 html 文档？
文章推荐： css - 如何使用纯 CSS 更改不活动的
  • 元素？
    • 行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com