如何叠加一个div绝对的表格单元格的顶部

在第二个表格单元格我有它，我想里面一个div到右外<td>的绝对定位。目前我有这一点，但问题是，这个坐在下面<td>的<td>'s都出现在DIV的顶部。最后，我将让每个<td>内部div的，他们将出现在侧翻。这是问题的一个图片，橙色<td>是当我有我的鼠标吧。那么我怎样才能定位div，使它看起来最顶层。不知道我是否正确使用z-index。如何叠加一个div绝对的表格单元格的顶部

链接图片：Snapshot of Issue

下面是相关的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>

来源

2012-02-10 Michael Rader

您正确使用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; 
}

来源

2012-02-10 22:40:55

谢谢，我觉得这个做的。 – 2012-02-10 22:44:21

我会删除该表，并使用标准的div拥有的一切。然后使用z-index的相应放置上述

最好是其他的div避免使用表

来源

2012-02-10 16:45:03 JimmyBanks

我知道它不是标准的使用表，但是这个表的用法非常合适，它用于表格数据，而不是布局。我想为此坚持一张桌子。 – 2012-02-10 16:51:18

为什么最好避免使用表？表格服务于某个目的，并且做得非常好。表示“不使用表格”的思想流派 - 在发表评论时需要应用适当的上下文。 – MarzSocks 2015-01-17 11:58:12

如何叠加一个div绝对的表格单元格的顶部

回答

相关问题