怎么能让<span>里的内容永远都在页面的最上层？（php+css）

我这个新手又来问问题了。
我的主页面上要求一次显示好几个结构一样的表格，比如：
table1:
__________
|chip    |
|________|
|$data   |
|________|table2:
__________
|chip    |
|________|
|$data   |
|________|并且鼠标放在$data上，会以悬浮的形式动态显示<span></span>里的内容,也就是说<span></span>里的内容是在table $i的上一层。我的代码如下：//a.php<?phpfor($i=0;$i<2;$i++)
{
    echo "table $i<br>";
    echo "<table class='t1'><tr><td>chip</td></tr>";
    echo "<tr><td><a class='info' href='javascript:;'>$data<span><table class='t2'>";
    echo "<tr><td>$var1</td><td>$var2</td></tr></table></span></a>";
    echo "</td></tr></table>";
}?>//b.css
table.t1 { position:relative;z-index:0; }a.info { position:relative; z-index:1;}
a.info:hover { z-index:2;background:#ccc;}
a.info:span { display:none;}
a.info:hover span { display:block;position:absolute;}我用css动态显示信息。代码可以实现我的要求，但问题是，<span>里的内容比较多，在显示table 1 的chip的信息时，我希望是能够覆盖在table 2之上，但现在问题是它被table 2给覆盖了，也就是说<span>里的内容虽然在table 1的上一层，但却在table 2的下一层。请问这个该怎么解决？不知道我罗罗嗦嗦有没有把问题说清楚。= =反正就是怎么能让<span>里的内容永远都在页面的最上层？鞠躬，谢谢。