Z-index属性CSS

Question

I'm having a problem with the z-index.

I want to set a <a> that on when is hover it changes the class of the <a> and makes it be over something.

So I have set the <a> 's z-index=-1 and the other thing's z-index=1 and when you hover it changes the <a> 's class and in the class the z-index=2 so it suppose to be over the other thing, but it doesn't. I tried to set that on hover instead of changing the <a> 's z-index I have changed the other thing z-index to -2 and yet it didn't work.

I don't want to use the display=none and then to change the display because when the picture is not over the other thing you can still see some of it.

What is the problem? How do I fix it?

Thx for the help :D

EDIT: here is the code:

Code behind:

protected void show_view1(object sender, EventArgs e)
    {
        L1.Attributes.Add("class", "active");
    }

html:

<div id='settingNev' >
<ul >
  <li id="L1"  runat="server"><a id="A1" onserverclick="show_view1" runat="server"><span>Personal</span></a></li>
</ul>
</div>

the table i want it tio be over of when the mouse is hover the <a> :

<table style="border:1px solid black; padding:0px 0px 0px 0px; margin: 0px 0; position:relative;  z-index:1;" cellspacing="20">

css:

    #settingNev {
      float: left;
      width: 100%;
      background: TRANSPERANT;
      font-size: 93%;
      line-height: normal;
    }
    #settingNev ul {
      margin: 0;
      padding: 10px 10px 0 50px;
      list-style: none;
    }
    #settingNev li {
      display: inline;
      margin: 0;
      padding: 0;
    }
//....here is the z-index set................
    #settingNev a {
      float: left;
      margin:0 3px 0 3px;
      padding: 0 0 0 4px;
      text-decoration: none;
      z-index:-1;
      border:1px solid black;
      border-radius: 6px 6px 0px 0px; 
//.............................................
    }
    #settingNev a span {
      float: left;
      display: block;
      padding: 5px 15px 4px 6px;
      color: #666;
    }
    #settingNev a span {
      float: none;
    }
    #settingNev .active a span,
    #settingNev a:hover span {
      color: #FFFFFF;
    }
    #settingNev .active a,
    #cssmenu a:hover {
      background-position: 0 -42px;
      border-bottom:0px solid black;
    }
//....here is the z-index set................
    #settingNev .active a span,
    #settingNev a:hover span {
      background-position: 100% -42px;
      z-index:2;
    }

Answer 1

To make z-index works you must have one of this position (s) to you style element

• absolute
• relative
• fixed

any other position make z-index to not work.

Answer 2

In jQuery,

$("button").click(function(){
    $("the element").css("z-index","2");
};

you did something like this?