css - href 不适用于 z-index -1

Question

你好，我有这个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;
}

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