如何在<a>標籤中使用z-index？

我有下面的html，我希望它看起來完全相反，它看起來像現在，但我已經嘗試了很多，沒有什麼進展，具體而言，我想A鏈接在頂部的鏈接，B下一個權利，B下一個權利，等等... 我試圖設置Z指數給他們，但它沒有奏效。請向我解釋我的錯。如何在<a>標籤中使用z-index？

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

來源

2010-10-01 Mousa

你需要給<a>定位，因爲z-index工作它需要的定位被設置爲static以外的值，最簡單的設置它做的位置relative

例子：http://jsfiddle.net/2JsvU/

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

來源

2010-10-01 12:56:37

謝謝，這工作得很好。 – Mousa 2010-10-01 13:45:23

z索引需要position是相對或絕對的。將你的<a>標籤設置爲position:relative;，它應該開始服從z-index。

來源

2010-10-01 12:54:38 Spudley

謝謝你的回答。 – Mousa 2010-10-01 13:49:47

如何在<a>標籤中使用z-index？

回答

相關問題