Z-index属性CSS [英] Z-index attribute CSS

问题描述

我在用z-index的问题。

我想设置一个＆LT; A＆GT; 上时，悬停它改变了类＆LT;一＆GT; 并使它超过一些东西。

所以我已经设置了＆LT; A＆GT; 的的z-index = -1 和其他东西的的z-index = 1 ，当你悬停它改变了＆LT; A＆GT; 的类，并在类的z-index = 2 所以假设是比其他的事情，但事实并非如此。我试图设置上悬停，而不是改变＆LT; A＆GT; 的的z-index 我已经改变了另一件事的z-index 到 -2 ，但没有奏效。

我不想使用显示=无，然后更改显示，因为当画面不是比其他的事情你仍然可以看到它的一些

这是什么问题？如何解决呢？

THX的帮助：D

编辑：这里是code：

背后code：

 保护无效show_view1（对象发件人，EventArgs的发送）
    {
        L1.Attributes.Add（类，活动）;
    }
 

HTML

 ＆LT; D​​IV ID ='settingNev'＆GT;
＆LT; UL＆GT;
  ＆LT;李ID =L1=服务器＆GT;＆LT;一个ID =A1onserverclick =show_view1=服务器＆GT;＆LT;跨度＆GT;个人及LT; / SPAN＆GT;＆LT; / A＆GT;＆LT ; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

我想这TIO结束的当鼠标悬停是在＆LT表;一＆GT; ：

 ＆LT;表样式=边界：1px的纯黑色;填充：0像素0像素0像素0像素;保证金：0像素0;位置：亲属; z-index的：1; CELLSPACING =20＆GT;
 

CSS：

  #settingNev {
      浮动：左;
      宽度：100％;
      背景：TRANSPERANT;
      字体大小：93％;
      行高：正常;
    }
    #settingNev UL {
      保证金：0;
      填充：10px的10px的0 50px的;
      列表样式：无;
    }
    #settingNev李{
      显示：内联;
      保证金：0;
      填充：0;
    }
//....here是z-index的集................
    #settingNev一个{
      浮动：左;
      保证金：0 0 3PX的3px;
      填充：0 0 0 4像素;
      文字修饰：无;
      的z-index：-1;
      边框：1px的纯黑色;
      边界半径：6像素6像素0像素0像素;
// .............................................
    }
    #settingNev跨度{
      浮动：左;
      显示：块;
      填充：为5px 15px的4PX 6个像素;
      颜色：＃666;
    }
    #settingNev跨度{
      飘：无;
    }
    #settingNev。主动的跨度，
    #settingNev：悬停跨度{
      颜色：#FFFFFF;
    }
    #settingNev。主动一，
    #cssmenu：悬停{
      背景位置：0 -42px;
      下边框：0像素纯黑色;
    }
//....here是z-index的集................
    #settingNev。主动的跨度，
    #settingNev：悬停跨度{
      背景位置：100％-42px;
      的z-index：2;
    }
 

解决方案

若要的z-index 工作，你必须有这个位置（S）为您的风格元素

• 绝对


• 相对


• 固定

任何其他位置让的z-index 到不行。

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;
    }

解决方案

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.

这篇关于Z-index属性CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！