Html 如何将div绝对堆叠在表单元格的顶部

在第二个表格单元格中，我有一个div，我希望它绝对位于

之外。目前我有这个功能，但问题是位于该

下面的

将显示在div的顶部。最后，我将在每个
的内部设置div，它们将在翻滚时显示。这是一张关于这个问题的图片，橙色的
是当我把鼠标放在上面的时候。那么如何定位div，使其显示在最上面呢。不确定我是否正确使用了
z-index

链接至图片：

以下是相关的CSS：

td.link {
    position: relative;
    z-index: 100;
}

td div {
    height: 200px;
    width: 200px;
    position: absolute;
    top: -20px;
    right: -100px;
    background: #CCC;
    z-index: 500;
}

以及HTML：

    <table>
      caption>Emails For MPC Clients</caption>
      <thead>
         <th>Email</th>
         <th>Link</th>
         <th>Modified</th>
     </thead>
     <tr>
          <td>Live Webinar</td>
          <td class="link">
               <a href="#" target="_blank">liveWebinar.html</a>
              <div>
                  <h2>Some Content goes in here</h2>
              </div>
          </td>
           <td class="date">02/02/2012</td>
      </tr>
   </table>


标题>MPC客户端的电子邮件
电子邮件
链接
被改进的
现场网络研讨会
这里有一些内容
02/02/2012
我会删除表，并使用标准div保存所有内容。然后使用相应的z索引将其他div置于上方

最好避免使用表
因为您正确使用了Z索引，所以这不是问题所在。试着相对定位你的桌子，看看这是否能让你在球场上

table {
position:relative;
    z-index: 100
}

td.link {
    position: relative;
    z-index: 200;
}

td div {
    height: 200px;
    width: 200px;
    position: absolute;
    top: -20px;
    right: -100px;
    background: #CCC;
    z-index: 500;
}

我知道使用表不是标准的，但是这个表的用法非常合适，它用于表数据，而不是布局。我想用一张桌子来做这个。为什么最好避免使用桌子？桌子有一定的用途，而且做得很好。说“不要使用表格”的思想流派在发表评论时需要运用适当的上下文。谢谢，我想这已经做到了。