我有以下 html，我希望它看起来与现在的样子完全相反，但我已经尝试了很多但没有任何进展，具体来说我希望 A 链接位于顶部链接，B 就在它的下面，C 就在 B 的下面，等等...... 我试图为它们设置 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;
}
最佳答案
您需要提供 <a>定位，因为对于z-index要工作，它需要将定位设置为 static 以外的值, 最简单的方法是将它的位置设置为 relative
示例: http://jsfiddle.net/2JsvU/
a {
position: relative;
z-index: 5;
}
关于css - 如何在 <a> 标签中使用 z-index？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3839178/