Comment utiliser z-index dans un tag <a>?

J'ai le html suivant que je veux qu'il soit vu exactement à l'opposé de ce à quoi il ressemble maintenant, mais j'ai essayé beaucoup et rien ne va bien, pour être précis je veux que le lien A soit sur le dessus de la liens, et le B juste en dessous, et le C juste en dessous de B, et ainsi de suite ... J'ai essayé de leur fixer l'index z mais cela n'a pas fonctionné. s'il vous plaît expliquer à moi ma faute.Comment utiliser z-index dans un tag <a>?

HTML:

<html> 
<head> 
    <title>Test page</title> 
    <link href="style.css" type="text/css" rel="Stylesheet" media="screen" /> 
</head> 
<body> 
    <div class="d1"> 
     <a href="#" class="a1" style="background-color: #000;">A</a> 
     <ul class="b1"> 
      <li> 
       <a href="#" class="a2" style="background-color: #222;">B</a> 
      </li> 
      <li> 
       <a href="#" class="a2" style="background-color: #444;">C</a> 
      </li> 
      <li> 
       <a href="#" class="a2" style="background-color: #666;">D</a> 
      </li> 
      <li> 
       <a href="#" class="a2" style="background-color: #888;">E</a> 
      </li> 
     </ul> 
    </div> 
</body> 
</html>

CSS:

div.d1 
{ 
    width: 100px; 
    height: 160px; 
    float: left; 
    margin: 0 auto; 
    padding: 10px 50px 15px 50px; 

    background-color: Red; 
} 

a.a1 
{ 
    display: block; 
    width: 100px; 
    height: 130px; 
    float: left; 

    margin: 0 auto; 
    padding: 30px 0 0 0; 
} 
a.a1:hover 
{ 
    color: Red; 
} 

ul.b1 
{ 
    display: block; 
    width: 100px; 
    float: left; 

    position: relative; 
    left: 25px; 
    top: -160px; 

    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.b1 li 
{ 
    display: block; 
    width: 25px; 
    height: 160px; 
    float: left; 
    z-index: -1; 
} 
ul.b1 li a.a2 
{ 
    display: block; 
    width: 100px; 
    height: 130px; 

    margin: 0 auto; 
    padding: 30px 0 0 0; 
} 
ul.b1 li a.a2:hover 
{ 
    color: Red; 
}

Source

2010-10-01 Mousa

Vous devez donner le positionnement <a>, car pour z-index de travailler nécessite le positionnement être réglé sur une valeur autre que static, plus facile à faire en mettant sa position à relative

Exemple:http://jsfiddle.net/2JsvU/

a { 
    position: relative; 
    z-index: 5; 
}

Source

2010-10-01 12:56:37

merci, cela a bien fonctionné. – Mousa

z-index nécessite position être relatif ou absolu. Définissez votre tag <a> sur position:relative; et il devrait commencer à obéir à l'index z.

Source

2010-10-01 12:54:38 Spudley

merci pour votre réponse. – Mousa

Comment utiliser z-index dans un tag <a>?

Répondre

Questions connexes