href not working with z-index -1

Helllo, I have this html code

<div class="tf">
<a href="http://www.twitter.com/!!!" target="_blank" ><img src="images/twitter.png" width="2%" cl开发者_如何学Cass="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>

and for the CSS

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

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

to be the image out of the border but I can't click in the image so what's the problem and what's the solution for that ?

Both of your images have the same class assigned to them. You are stacking them on top of each other by not setting them to different positions and the facebook.com one appears on top since it is last in the html. If you want them to appear beside each other you can apply something like the following:

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

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

And now assign each image the appropriate class.

try using:

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