href无法使用z-index -1

Question

Helllo，我有这个HTML代码

<div class="tf">
<a href="http://www.twitter.com/!!!" target="_blank" ><img src="images/twitter.png" width="2%" class="tfimg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.facebook.com/pages/!!!/212810852094228" target="_blank"><img src="images/facebook.png"  width="2%" class="tfimg"></a>
</div>

和CSS

   .tf {
float:right;
margin-right:65px;
margin-top:-30px;
padding:2px;
}

.tfimg {
position:absolute;
z-index:-1;
border:none;
}

要成为边界外的图像，但我无法点击图像，那么问题是什么？解决方案是什么？

Answer 1

您的两张图片都分配了相同的类别。你没有将它们设置到不同的位置，而是将它们堆叠在一起，而facebook.com一个显示在顶部，因为它是html中的最后一个。如果您希望它们彼此并排显示，您可以应用以下内容：

.tftwitter {
position:absolute;
left:0px;
border:none;
}

.tffacebook {
position:absolute;
left: 20px;
border:none;
}

现在为每个图像分配适当的类。

Answer 2

尝试使用：

.tf{ display:inline-block; /* your more code */ }